FANDOM


  • Hey, I was around here for a bit a while ago, and now that I'm returning to Cookie Clicker, I figured I'd outsource an idea I had.

    Introductions aside, is there any way to "change" the textures loaded into the game? In other words, I want to replace the images in the /cookieclicker/img/ subdirectory with my own. Custom CSS doesn't seem to be working for most textures (though I might be missing something), someone else's tools could risk CCTA, and I'm not even going to bother making my own Js given my low-as-all-heck skill level there.

    So, is there any relatively easy method I can use to skin the textures of Cookie Clicker's interface, preferably using CSS or something? That's really all I'm asking here.

      Loading editor
    • You can see all game images here.

      Each image from this list:

      "filler.png", "cursor.png", "grandmaBackground.png", "grandma.png", "farmerGrandma.png", "workerGrandma.png", "minerGrandma.png", "cosmicGrandma.png", "transmutedGrandma.png", "alteredGrandma.png", "grandmasGrandma.png", "antiGrandma.png", "rainbowGrandma.png", "elfGrandma.png", "bunnyGrandma.png", "farmBackground.png", "farm.png", "factoryBackground.png", "factory.png", "mineBackground.png", "mine.png", "shipmentBackground.png", "shipment.png", "alchemylabBackground.png", "alchemylab.png", "portalBackground.png", "portal.png", "timemachineBackground.png", "timemachine.png", "antimattercondenserBackground.png", "antimattercondenser.png", "prismBackground.png", "prism.png", "bgBlue.jpg", "grandmas1.jpg", "grandmas2.jpg", "grandmas3.jpg", "shadedBorders.png", "shadedBordersRed.png", "shadedBordersGold.png", "cookieShower1.png", "cookieShower2.png", "cookieShower3.png", "snow.jpg", "snow2.jpg", "heartStorm.png", "smallDollars.png", "smallCookies.png", "shine.png", "nest.png", "perfectCookie.png", "imperfectCookie.png", "milkWave.png", "chocolateMilkWave.png", "raspberryWave.png", "orangeWave.png", "caramelWave.png", "wrinkler.png", "winterWrinkler.png", "wrinklerBits.png", "santa.png"

      can be changed with this console command:

      var X = "<name of image you want to change>"
      var Y = "<link to image to which you want to change>"
      if (Game.Loader.assetsLoaded.indexOf(X) == -1)
      	Game.Loader.Load([X]);
      Game.Loader.Replace(X, Y);
      

      For example, if you want to change cursor.png to this image you need to use this:

      var X = "cursor.png"
      var Y = "http://www.desktopwallpapers.ru/i/hrt.png"
      if (Game.Loader.assetsLoaded.indexOf(X) == -1)
      	Game.Loader.Load([X]);
      Game.Loader.Replace(X, Y);
      

      To change buildings' store icons and make them not changing back every time store rebuilds you need to completely redeclare rebuild functions:

      var N = <buildings's ID>
      var L = "<link to image to which you want to change normal icon>"
      var BL = "<link to image to which you want to change business day icon>"
      l('productIcon'+N).style.backgroundImage='url('+L+')';
      Game.ObjectsById[N].icon = L;
      Game.ObjectsById[N].rebuild=function()
      	{
      		var me=this;
      		var classes='product';
      		var price=me.price;
      		if (Game.cookiesEarned>=me.basePrice) {classes+=' unlocked';me.locked=0;} else {classes+=' locked';me.locked=1;}
      		if (Game.cookies>=price) classes+=' enabled'; else classes+=' disabled';
      		if (me.l.className.indexOf('toggledOff')!=-1) classes+=' toggledOff';
      		
      		var iconOff='';
      		var icon='';
      		if (typeof me.icon=='string')
      		{
      			icon=me.icon;
      			iconOff=me.icon;
      		}
      		else
      		{
      			icon=me.icon();
      			iconOff=me.icon('off');
      		}
      		var desc=me.desc;
      		var name=me.name;
      		var displayName=me.displayName;
      		if (Game.season=='fools')
      		{
      			if (!Game.foolIcons[me.name])
      			{
      				icon=Game.foolIcons['Unknown']+'.png';
      				name=Game.foolNames['Unknown'];
      				desc=Game.foolDescs['Unknown'];
      			}
      			else
      			{
      				icon=BL;
      				name=Game.foolNames[me.name];
      				desc=Game.foolDescs[me.name];
      			}
      			iconOff=icon;
      			displayName=name;
      			if (name.length>16) displayName=+name+;
      		}
      		
      		me.l.className=classes;
      		l('productIcon'+me.id).style.backgroundImage='url('+icon+')';
      		l('productIconOff'+me.id).style.backgroundImage='url('+iconOff+')';
      		l('productName'+me.id).innerHTML=displayName;
      		l('productOwned'+me.id).innerHTML=me.amount?me.amount:'';
      		l('productPrice'+me.id).innerHTML=Beautify(Math.round(me.price));
      	}
      

      Only way to change golden cookie image is to completely redeclare Game.goldenCookie.spawn function:

      var G = "<link to image to which you want to change goldCookie.png>"
      var W = "<link to image to which you want to change wrathCookie.png>"
      var S = "<link to image to which you want to change spookyCookie.png>"
      var H = "<link to image to which you want to change hearts.png>"
      var C = "<link to image to which you want to change contract.png>"
      var WC = "<link to image to which you want to change wrathContract.png>"
      var B = "<link to image to which you want to change bunnies.png>"
      Game.goldenCookie.spawn=function()
      {
      	if (this.time<this.minTime || this.life>0) Game.Win('Cheated cookies taste awful');
      	
      	var me=l('goldenCookie');
      	me.style.backgroundPosition='0px 0px';
      	if ((Game.elderWrath==1 && Math.random()<1/3) || (Game.elderWrath==2 && Math.random()<2/3) || (Game.elderWrath==3))
      	{
      		this.wrath=1;
      		if (Game.season=='halloween') me.style.background='url('+S+')';
      		else me.style.background='url('+W+')';
      	}
      	else
      	{
      		this.wrath=0;
      		me.style.background='url('+G+')';
      	}
      	//fancy visual stuff
      	var r=Math.floor(Math.random()*360);
      	if (Game.season=='halloween' && this.wrath) r=Math.floor(Math.random()*36-18);
      	if (Game.season=='valentines')
      	{
      		me.style.background='url('+H+')';
      		me.style.backgroundPosition=-(Math.floor(Math.random()*8)*96)+'px 0px';
      		r=Math.floor(Math.random()*36-18);
      		if (this.wrath) r+=180;
      	}
      	else if (Game.season=='fools')
      	{
      		me.style.background='url('+C+')';
      		r=Math.floor(Math.random()*8-4);
      		if (this.wrath) me.style.background='url('+WC+')';
      	}
      	else if (Game.season=='easter')
      	{
      		me.style.background='url('+E+')';
      		var picX=Math.floor(Math.random()*4);
      		var picY=0;
      		if (this.wrath) picY=1;
      		me.style.backgroundPosition=(-picX*96)+'px '+(-picY*96)+'px';
      		r=Math.floor(Math.random()*36-18);
      	}
      	me.style.transform='rotate('+r+'deg)';
      	me.style.mozTransform='rotate('+r+'deg)';
      	me.style.webkitTransform='rotate('+r+'deg)';
      	me.style.msTransform='rotate('+r+'deg)';
      	me.style.oTransform='rotate('+r+'deg)';
      	var screen=Game.l.getBoundingClientRect();
      	this.x=Math.floor(Math.random()*Math.max(0,(screen.right-300)-screen.left-128)+screen.left+64)-64;
      	this.y=Math.floor(Math.random()*Math.max(0,screen.bottom-screen.top-128)+screen.top+64)-64;
      	me.style.left=this.x+'px';
      	me.style.top=this.y+'px';
      	me.style.display='block';
      	//how long will it stay on-screen?
      	var dur=13;
      	if (Game.Has('Lucky day')) dur*=2;
      	if (Game.Has('Serendipity')) dur*=2;
      	if (this.chain>0) dur=Math.max(2,10/this.chain);//this is hilarious
      	this.dur=dur;
      	this.life=Math.ceil(Game.fps*this.dur);
      	this.time=0;
      	this.toDie=0;
      }
      

      Only way to change reindeer image is to completely redeclare Game.seasonPopup.spawn function:

      var X = "<link to image to which you want to change>"
      Game.seasonPopup.spawn=function()
      {
      	if (this.time<this.minTime || this.life>0) Game.Win('Cheated cookies taste awful');
      	
      	var me=l('seasonPopup');
      	
      	if (this.type=='reindeer')
      	{
      		me.style.backgroundImage='url('+X+')';
      	}
      	
      	//fancy visual stuff
      	this.bounds=Game.l.getBoundingClientRect();
      	//this.x=Math.floor(Math.random()*Math.max(0,(screen.right-300)-screen.left-128)+screen.left+64)-64;
      	//this.y=Math.floor(Math.random()*Math.max(0,screen.bottom-screen.top-128)+screen.top+64)-64;
      	this.x=-128;
      	this.y=Math.floor(Math.random()*Math.max(0,this.bounds.bottom-this.bounds.top-256)+this.bounds.top+128)-128;
      	me.style.left=this.x+'px';
      	me.style.top=this.y+'px';
      	me.style.display='block';
      	//how long will it stay on-screen?
      	var dur=4;
      	if (Game.Has('Weighted sleighs')) dur*=2;
      	this.dur=dur;
       	this.life=Math.ceil(Game.fps*this.dur);
      	this.time=0;
      	this.toDie=0;
      }
      

      To change left vertical border use this:

      document.getElementsByClassName('separatorLeft')[0].style.background = 'url(<link to image to which you want to change>) repeat-y'
      

      To change right vertical border use this:

      document.getElementsByClassName('separatorRight')[0].style.background = 'url(<link to image to which you want to change>) repeat-y'
      

      To change horizontal borders in menu section use this:

      document.getElementsByClassName('separatorBottom')[<border's number>-1].style.background = 'url(<link to image to which you want to change>) repeat-x'
      

      or this to change them all:

      for (var i = 0; i < document.getElementsByClassName('separatorBottom').length; i++)
      	document.getElementsByClassName('separatorBottom')[i].style.background = 'url(<link to image to which you want to change>) repeat-x'
      

      To change horizontal borders in store section use this:

      document.getElementsByClassName('storeSection')[<border's number>-1].style.background = 'url(<link to image to which you want to change>) repeat-x'
      

      or this to change them all:

      for (var i = 0; i < document.getElementsByClassName('storeSection').length; i++)
      	document.getElementsByClassName('storeSection')[i].style.background = 'url(<link to image to which you want to change>) repeat-x'
      

      To change store tiles use this:

      document.getElementsByClassName('product')[<tile's number>-1].style.background = 'url(<link to image to which you want to change>)'
      

      or this to change them all:

      for (var i = 0; i < document.getElementsByClassName('product').length; i++)
      	document.getElementsByClassName('storeSection')[i].style.background = 'url(<link to image to which you want to change>)'
      

      Changing upgrades and achievements icons is compicated, so I'll tell you later.

        Loading editor
    • Thanks.

      I don't care much about upgrades or achievements, so that should be okay I think.

        Loading editor
    • Bloody Body
      Bloody Body removed this reply because:
      unacceptable content
      10:06, July 31, 2015
      This reply has been removed
    • how about no

        Loading editor
    • If I made my own image and have it on my computer but not online, how would i change the image to that?

        Loading editor
    • That is a good question

        Loading editor
    • Hitler did nothing wrong

        Loading editor
    • can you change the big cookie image?

        Loading editor
    • A FANDOM user
        Loading editor
Give Cookies to this message
You've given this message Cookies!
See who gave Cookies to this message
Community content is available under CC-BY-SA unless otherwise noted.