Cookie Clicker customization tutorial

If you want to change the way your game looks, you just need a simple command in your console ! The changes will disappear if you refresh the page but you can keep the code somewhere and copy it every time you open CC. To open your console (where you paste the commands), you can follow the instructions here.



Special thanks: The guys at the dashnet forum for helping me learning the commands of this page, and creating some for me !

Contents show]

Changing basic textures Edit

To change basic textures, just enter this command:



Game.Loader.Replace(' <old image> ',' <new image> ')

Where <old image> is the image you want to replace and <new image> is the image you want. You can only use images of the game. For example:



Game.Loader.Replace('perfectCookie.png','grandmaIcon.png')

Will replace the big cookie by a grandma face. Contrary to reindeers, changing wrinklers will not change their hitbox (100 by 200 pixels). You cannot change every image in the game with this technique. You can only change:

The big cookie

All the particles, including the falling cookies in the background, the seasonal backgrounds, the light behind the big cookie...

The wrinklers and the Christmas wrinklers

The buildings, including the cursors around the cookie

The buildings backgrounds

The backgrounds and milks (see below)

The borders that changes color during a Frenzy or Clot.

You are limited by the images that you use, since you can only use images of the game, but you can override this limit by creating a new command. Simply paste this code into your console (only once):

Game.Loader.Replaceb Game.Loader.Replaceb=function(old,newer) {

var img=new Image();

img.src=newer;

if (typeof old === 'string' && this.assets[old]) {

img.onload=bind(this,this.onLoad);

this.assets[old] = img;

}

else if (Object.prototype.toString.call(old) === '[object Array]' && this.assets[old[0]]) {

img.onload=bind(this,this.onLoad);

for (i in old) {

if (this.assets[old[i]]) {

this.assets[old[i]] = img;

}

else {

console.log(old[i] + ' is not a part of CC images');

}

}

}

else {

console.log('U WOT M8')

}

}

This creates a command that allows you to change multiple images at a time and to use your own images. The command is:



Game.Loader.Replaceb(' <image> ',' <URL> ')

Or:



Game.Loader.Replaceb([' <image 1> ',' <image 2> ',' <image 3> '...],' <URL> ')

Where <image> is the image you want to replace and <URL> is the url of the image you want. For example:



Game.Loader.Replaceb('cursor.png','http://images1.wikia.nocookie.net/__cb20120405101656/maditsmadfunny/images/thumb/4/4e/Twilight_Sparkle.png/100px-Twilight_Sparkle.png')

Will replace your cursors into Twilight Sparkle. (sorry)

If you enter this:



Game.Loader.Replaceb(['perfectCookie.png','cursor.png','wrinkler.png','winterWrinkler.png'],'http://images1.wikia.nocookie.net/__cb20140114011112/maditsmadfunny/images/thumb/4/41/Rainbow_Dash_3.png/200px-Rainbow_Dash_3.png')

You will replace your Cookie, cursors and wrinklers by Rainbow Dash. (sorry again)

Changing your milk Edit

With the Game.Loader.Replaceb command you can change you milk easily. Just use:



Game.Loader.Replaceb(['caramelWave.png','chocolateMilkWave.png','milkWave.png','orangeWave.png','raspberryWave.png'],' <milk> ')

Where <milk> is the milk you want. Here are all the milk types:

caramelWave.png

chocolateMilkWave.png

milkWave.png

orangeWave.png

raspberryWave.png

Changing your background Edit

With the Game.Loader.Replaceb command you can change you background easily (even during the grandmapocalypse, or during April Fool's). Just use:



Game.Loader.Replaceb(['grandmas1.jpg','grandmas2.jpg','grandmas3.jpg','bgBlue.jpg','bgMoney.jpg'],' <background> ')

Where <background> is your new background (remember that you can use any url).

If you only want to change the background during the grandmapocalypse, you can use:



Game.Loader.Replaceb(['grandmas1.jpg','grandmas2.jpg','grandmas3.jpg'],' <background> ')

Where <background> is the new background you want.

Changing golden cookies and reindeers Edit

Golden cookies Edit

To change the appearance of golden and wrath cookies, you can just use this command:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/ <cookie type> )';","me.style.background='url( <URL> )'; me.style.backgroundSize = 'cover';"))

Where <cookie type> is the type of golden cookie that you want to change. There are 5 types of golden cookies in total, excluding the spooky cookies and bunnies (see below):

goldCookie.png

wrathCookie.png

contract.png

wrathContract.png

hearts.png

<URL> is the url of the image you want. If you're using an image of the game, you will need to type img/ before the name of the image. For example img/antimattercondenser.png will be the image of the antimatter condenser. The command will automatically resize the image at the correct size (96x96 pixels) but it will cut the borders if the image isn't a square. For example:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/goldCookie.png)';","me.style.background='url(http://images1.wikia.nocookie.net/__cb20140419144941/cookieclicker/images/c/cc/StableAntimatterCondenser.png)'; me.style.backgroundSize = 'cover';"))

Will transform regular golden cookies into golden antimatter condensers.

Spooky cookies Edit

For some reasons, the spooky cookies (wrath cookies during the Halloween season) does not behave like regular golden/wrath cookies, so the command is a bit different:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/spookyCookie.png)';","me.style.background='url( <URL> )';"))

Where <URL> is your image's url. Because the command has been changed, the image will not be resized automatically. You'll need to use a 96 by 96 image, otherwise it won't fit properly. For example:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/spookyCookie.png)';","me.style.background='url(http://images1.wikia.nocookie.net/__cb20140421134754/cookieclicker/images/6/65/SpookyAntimatterCondenser96.png)';"))

Will replace the spooky cookies by spooky antimatter condensers. (I like having antimatter condensers as golden cookies)

Like for regular golden cookies, you can randomize the spooky cookies by putting multiple images in one line. Since the command won't resize the cookies, you must have a 96 pixel tall image with a multiple of 96 pixels width.

Randomized cookies Edit

You can have randomized golden cookies like in Valentines Day by having multiple cookies in your image (you need to put them in one line). Like for spooky cookies, they won't be resized automatically'. You'll need an image that is 96 pixel tall, with multiple cookies next together. The command to have randomized cookies is:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/ <cookie type> )';","me.style.background='url( <URL> )'; me.style.backgroundPosition=-(Math.floor(Math.random()* <cookie amount> )*96)+'px 0px';"))

Where <cookie type> is the type of golden cookie that you want to change, including the spooky cookies:

goldCookie.png

wrathCookie.png

contract.png

wrathContract.png

hearts.png

spookyCookie.png

<URL> is the url of the image you want. As said previously, you need a 96 pixel tall image with different 96x96 images next together in it. <cookie amount> is the number of cookies in your image. It needs to be specified in order for the game to understand the command properly. For example:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/wrathCookie.png)';","me.style.background='url(http://images1.wikia.nocookie.net/__cb20140528171526/cookieclicker/images/7/78/UnstableAntimatterCondenserPile96.png)'; me.style.backgroundPosition=-(Math.floor(Math.random()*4)*96)+'px 0px';"))

Will change wrath cookies into different types of unstable antimatter condensers.



Bunnies Edit

For bunnies, you need to have the regular and wrath bunnies in the same image. All the normal bunnies being on top of the wrath bunnies. You need to have the same amount of regular and normal bunnies, otherwise some will be invisible. The bunnies won't be resized, so you need to have 96 by 96 images in your bunny image.



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/bunnies.png)';","me.style.background='url( <URL> )';"))

var picX=Math.floor(Math.random()* <amount of bunnies in one row> );

<URL> is your image's url and <amount of bunnies in one row> , like for randomized cookies, is the amount of bunnies that you have in one row (remember, the two rows need to have the same amount of bunnies). For example:



eval('Game.goldenCookie.spawn='+ Game.goldenCookie.spawn.toString().replace("me.style.background='url(img/bunnies.png)';","me.style.background='url(http://img1.wikia.nocookie.net/__cb20140827135913/cookieclicker/images/d/db/EasterEggs.png)';"))

var picX=Math.floor(Math.random()*3);

Will change bunnies into different types of eggs (3 types of eggs per line).



Reindeers Edit

Reindeers work similarly to golden cookies. To change reindeers' appearance, just use



eval('Game.seasonPopup.spawn='+ Game.seasonPopup.spawn.toString().replace("url(img/frostedReindeer.png)","url( <URL> )"))

Where <URL> is the url of the image you want to replace your reindeer by. The image you're using can't be bigger than 256x256 pixels. Since the hitbox of the reindeer is depending on the image size, you can use a large image to make reindeers easier to click. For example:



eval('Game.seasonPopup.spawn='+ Game.seasonPopup.spawn.toString().replace("url(img/frostedReindeer.png)","url(http://images1.wikia.nocookie.net/__cb20140417152738/cookieclicker/images/d/de/ReindeerFasterMenner.png)"))

Will replace reindeers by faster menners that are bigger than the regular reindeers.

You can use this command to make small images the same size as reindeers:



eval('Game.seasonPopup.spawn='+ Game.seasonPopup.spawn.toString().replace("url(img/frostedReindeer.png)","url( <URL> ); me.style.backgroundSize = 'cover';"))

Where <URL> is the url of the image you want to replace your reindeer by.

Changing building icons Edit

In order to change you buildings' icons (in the store), you need to create a command by pasting this code into your console (only once):

changeObjectIcon var changeObjectIcon = function(building,iconURL) {

building.customIcon = iconURL;

(function() {

var oldVersion = building.rebuild;

building.rebuild = function() {

var result = oldVersion.apply(this, arguments);

l("productIconOff"+building.id).style.backgroundImage="url("+building.customIcon+")";

l("productIcon"+building.id).style.backgroundImage="url("+building.customIcon+")";

};

})();

building.rebuild();

}

This creates a command that allows you to change the buildings' icons. The command is:



changeObjectIcon(Game.Objects[' <building> '],' <URL> ')

Where <building> is the name of your building and <URL> the url of your new image. For example:



changeObjectIcon(Game.Objects['Prism'],'http://images1.wikia.nocookie.net/__cb20130917153905/cookieclicker/images/thumb/4/45/Elder_pelge_cookie.png/64px-Elder_pelge_cookie.png')

Will change your Prism icon into a light-blue golden cookie. Make sure that your image is a 64 by 64 for a better effect.

Changing grandmas Edit

As you probably know, grandmas have 4 different icons in the shop; depending on the grandmapocalypse stage you are on. Using the previous changeObjectIcon command, you can change the grandma icon to one image, but you can't chose different images depending on the grandmapocalyplse stage. To do this, you need to create a new command by simply pasting this code into you console (only once):

changeGrandmaIcon var changeGrandmaIcon = function(urlarray) {

building=Game.Objects['Grandma'];

building.customIcon = urlarray;

(function() {

var oldVersion = building.rebuild;

building.rebuild = function() {

var result = oldVersion.apply(this, arguments);

l("productIconOff"+building.id).style.backgroundImage="url("+building.customIcon[Game.elderWrath]+")";

l("productIcon"+building.id).style.backgroundImage="url("+building.customIcon[Game.elderWrath]+")";

};

})();

building.rebuild();

}

This creates a command that allows you to change the different grandma types by different images. The command is:



changeGrandmaIcon([' <image 1> ',' <image 2> ',' <image 3> ',' <image 4> '])

<image 1> is the url of the image you want to have for regular grandmas;

<image 2> is the url of the image you want to have for awoken grandmas;

<image 3> is the url of the image you want to have for displeased grandmas;

<image 4> is the url of the image you want to have for angered grandmas

For example:



changeGrandmaIcon(['http://img4.wikia.nocookie.net/__cb20140502183258/cookieclicker/images/6/65/PinkiePieIcon.png','http://img1.wikia.nocookie.net/__cb20140502183306/cookieclicker/images/b/b3/Pinkamena1.png','http://img2.wikia.nocookie.net/__cb20140502183313/cookieclicker/images/f/fc/Pinkamena2.png','http://img3.wikia.nocookie.net/__cb20140502183323/cookieclicker/images/4/4a/Pinkamena3.png'])

Will change grandmas into different stages of Pinkie Pie. (I'm not sorry)



Renaming buildings and changing their description and actions Edit

You need to create a command in order to change buildings names, actions and descriptions. Just paste this code (only once):

changeName function changeName(building,name,actionName,desc) {

building.displayName=name;

building.name=name;

building.plural=name.toLowerCase()+"s";

building.single=name.toLowerCase();

if (actionName) building.actionName=actionName;

if (desc) building.desc=desc;

building.rebuild();

}

This will create a command that allows you to change your buildings' names, actions and descriptions. The command is:



changeName(Game.Objects[' <building name> '],' <new name> ',' <action> ',' <desc> ')

<building name> is the name of your building. For example "Farm" or "Alchemy lab".

<new name> is the new name you want for your building.

<action> (optional) is the action performed by the building. For example "clicked", "baked", "harvested"...

<desc> (optional) is the description of the building. For example "A nice grandma to bake more cookies" or "Brings cookies from the past, before they were even eaten". For example:



changeName(Game.Objects['Cursor'],'Hand')

Will rename cursors into hands, but will not change anything else.



changeName(Game.Objects['Antimatter condenser'],'Lama','lamated','A nice lama to lama more cookies')

Will turn antimatter condensers into lamas, with a lama-related action and description....

You can use simple HTML (which is the same source code as used for this wiki) when renaming buildings. For example, you can underline or/and stripe names, change their colors... Here is some example you can use:

<b>example</b> will do: example (cannot be used with building names)

will do: <i>example</i> will do: example (cannot be used with building names)

will do: <u>example</u> will do: example

will do: <s>example</s> will do: example

will do: <font color="00d72e">example</font> will do: example (were the number is the code for the color that you can find using external programs like gimp)

If (like for Antimatter condensers) your building name is too big for the tile, you can change its size:

<small>example</small> will do: example

will do: <big>example</big> will do: example

will do: <font size=4>example</font> will do: example

will do: <font size=5>example</font> will do: example (the actual size of the buildings names in the shop)

You can of course use multiple tags at the same time:

<b><u><font color="b16c00">example</font></u></b> will do: example

Warning: If your building name, description or action contains an apostrophe ', the command won't work. You need a backslash \ before any apostrophe ' you add in your text. For example, if you want a building named "Grandma's cookies", you will need to type "Grandma\'s cookies".

Changing achievements and upgrades icons Edit

If you want to change your upgrades/achievements icons, you need to create a command first by pasting this code into your console (only once):

changeAchievementIcon function changeAchievementIcon(me,iconURL,pos) {

pos = typeof pos !== 'undefined' ? pos : [0,0];

pos.push(iconURL);

me.icon=pos;

Game.RebuildUpgrades()

}

This creates a command that allows you to change every upgrades/achievements icons, even if you haven't purchased/unlocked them yet. The command is:



changeAchievementIcon(Game.Achievements[" <name> "],' <URL> ', <position> )

Or:



changeAchievementIcon(Game.Upgrades[" <name> "],' <URL> ', <position> )

(Depending on if you want to change an upgrade or an achievement).

Where <name> is the name of your upgrade/achievement, <URL> is the url of your image and <position> is the position of your icon in your image (which is optional). You can have multiple icons in one image, and the <position> tag is here to define which one you want to use.

The position of an icon is defined by two numbers in square bracket, separated by a comma (for example [10,6]). The first number is the column (starting at 0), and the second is the line (starting at 0 too). For example, if you're using the icons of the game, and you want to use the golden pickax icon:

You will have to specify the column first (0 is the cursors, 1 is the rolling pins...), which is 3 for the pickax; and then the line (0 is the regular pickax, 1 is the golden one...), which is 1. So the coordinates of the golden pickax icon is [3,1]. If you want the "Snowman biscuits", it's [14,10], and if you want the "Communal brainsweep", it's [6,9].

If you find the position system to complicated to use, you could always use one icon per image (and you won't need to specify the position of the icon). In any case, the icon needs to be 48 by 48 pixels, or it won't fit properly. The icons of Cookie Clicker are actually composed of 2x2 pixels instead of 1x1, so you will need to consider this when making your icons if you want them to be similar as the regular Cookie Clicker icons.

I have actually made a set of recolored icons that you can use like regular CC icons that can be found here. The url is: https://i.imgur.com/QzoNfck.png

Orteil himself also posted a set of RPG icons that are the same style and size as CC icons on deviantart, here.

If you're using regular icons of Cookie Clicker, you can use img/icons.png as url. For example:



changeAchievementIcon(Game.Achievements["Wake and bake"],'img/icons.png',[3,15])

Will replace the icon of the "Wake and bake" achievement by a mechanic cookie.



changeAchievementIcon(Game.Upgrades["Gingerbread scarecrows"],'https://i.imgur.com/QzoNfck.png',[5,3])

Will replace the icon of the "Gingerbread scarecrows" upgrade by a cookie watering can.

Renaming achievements and upgrades, changing their description Edit

Coming soon

Tips and Tricks Edit

Removing ads Edit

To remove the ads column on the right, use this:

Removing ads $('#sectionAd').style.display = 'none';

$('.separatorRight').style.right = '317px';

$('#sectionMiddle').style.right = '318px';

$('#sectionRight').style.right = '0px';

Inproving framerate Edit

Use this command to remove building images and have a better framerate:



document.styleSheets[1].insertRule('.rowCanvas{display:none;}',document.styleSheets[1].cssRules.length)

Use this to get them back (you'll have your regular FPS again):



document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length - 1)

Extra stats mod Edit

A mod made by Zyzzyzus that adds another stats page to your game. For example: cookies in wrinklers, HCs earned this game... (forum thread)

