Image Packs – Creation and Usage

Image Pack Creation

Local downloads of The Company will come with the pics folder already included, as well as a couple Readme files. This is both to make the location of where image folders need to go more clear, as well as establishing a new default folder in the pics directory: The js folder. Inside the js folder you’ll find a very simple imgCheck.js file, used for handling the initial image check in the game:

window.imgCheck('{"type":"local","enabled":true,"version":13,"name":"Default"}');

Nothin’ to it, right? If this file is present and type is set to local and the game finds it in the pics directory you’ll be notified that your image structure is set up correctly. Here’s a quick breakdown of the properties above:

• Type – Leave this set to “local” when making image packs. It lets the game know you’re playing locally and not online
• Enabled – Determines whether or not image are enabled. Obviously, you’ll want to leave this one set to true
• Version – Each manifest file will have a version number for the game to check against and determine if an image pack is out of date. Check the most current version of the official image packs for current version numbers
• Name – Assign a name to your image pack

Of course, all this is simply informative as you’ll never want to modify this particular file. To create your own image packs, let’s look at Penny’s image pack manifest file, imgPenny.js…

window.imgPenny('{\
    "version":13,\
    "name":"Default",\
    "allowRandom":true,\
    "isPhoto":true,\
    "default":["pics/penny/default.jpg"],\
    "default-dom":["pics/penny/default-dom.jpg"],\
    "flash":["pics/penny/flash.jpg"],\
    "bed":["pics/penny/bed.jpg"],\
    "outside":["pics/penny/outside.jpg"],\
    "phone1":["pics/penny/phone1.jpg"],\
    "phone2":["pics/penny/phone2.jpg"],\
    "phonejohn":["pics/penny/phonejohn.jpg"],\
    "kiss-female":["pics/penny/action/kiss-female.gif"],\
    "kiss-male":["pics/penny/action/kiss-male.gif"],\
    "kiss-ts":["pics/penny/action/kiss-female.gif"]\
}');

What you see here is a truncated version of the file, but the concept is the same for the full version. Let’s start at the top!

window.imgPenny('{\
    "version":13,\
    "name":"Default",\
"allowRandom":true,\
"isPhoto":true,\

The first line is the name of the function as well as the name of the manifest file itself. These cannot change. Don’t touch the first line, and don’t change the filename!

• Version – The version of the image manifest which the game will resolve against the latest official image pack. Try to keep this up to date
• Name – The name for your image pack, it can be anything! Try to give it a unique name to differentiate it from other image packs. Something like “Westane – Change Penny to Vixen” works just fine
• AllowRandom – This can be set to true or false. If it’s set to true, and multiple files have been assigned to a single image, one of those files will be loaded at random any time the image is called. If it’s false, only the first file (or only file) will be loaded every time.
• isPhoto denotes the image set as being single-layer photos, or using layered art assets.

...
"phone2":["pics/penny/phone2.jpg"],\
"phonejohn":["pics/penny/phonejohn.jpg"],\
"kiss-female":["pics/penny/action/kiss-female.gif"],\
"kiss-male":["pics/penny/action/kiss-male.gif"],\
"kiss-ts":["pics/penny/action/kiss-female.gif"]\
}');

And here we define our images! Here is the syntax for assigning files to images:

"IMGNAME":["IMAGE.JPG"],\
"IMGNAME":["IMAGE1.JPG","IMAGE2.GIF","IMAGE3.WEBM","IMAGE4.MP4"],\
"IMGNAME":["LASTIMAGE.JPG"]\

So it’s pretty straightforward. IMGNAME is the image name as it’s handled in the game. This means, DO NOT CHANGE IT. Changing the image name will prevent that image working in the game completely. Rather, you want to be changing everything in the [ brackets ]. File names must be complete paths starting from pics, and include the file extension. The new function supports loading any image types, as well as WEBM and MP4 videos! And, as you can see from the multi-image example on line 2, they can be mixed and matched without issue. Do remember that while the engine will attempt to load whatever files you give it, browser support and compatibility for these files needs to be considered as well.

Lastly, mind the missing comma on the last line before the ending }’); line. Ensure you don’t add a comma before the \ backslash on the last image name line of an image pack manifest file.

Making an image pack with the above knowledge is simple! Just look at the images you want to change, download your pictures and put them in the appropriate folders, update the image manifest file, and put it all in a (preferably) .zip file. Say you wanted to add some photo options for when Tasha texts you a picture while also keeping the original. You supply your own dancing.gif, selfie.jpg, and sexy.jpg images and put them in Tasha’s image folder. Your imgTasha.js file would be the original imgTasha.js file with the phone line modified:

window.imgTasha('{\
    "version":13,\
    "name":"Westane - Tasha Phone Pack",\
"allowRandom":true,\
...
"phone":["pics/tasha/phone.jpg","pics/tasha/dancing.gif","pics/tasha/selfie.jpg","pics/tasha/sexy.jpg"],\
...

Then you’d zip the pics directory, which would only contain your modified imgTasha.js file and applicable images…

\pics\
 ...\tasha\
......\js\
.........imgTasha.js
......phone.jpg
......selfie.jpg
......sexy.jpg
......dancing.gif

And that’s it!

As detailed above, it is entirely possible for the image pack creature to sidestep the pics directory for their images. This is a great idea to keep content packs separate from each other. For example, your imgTasha.js file could look like this, instead…

window.imgTasha('{\
"allowRandom":true,\
...
"outside":["myImgPack/tasha/outside.jpg"],\
"default":["myImgPack/tasha/default.jpg"],\
"phone":["myImgPack/tasha/phone.jpg"],\
...

Your game directory would contain both a pics folder, as well as a myImgPack folder. Of course, the imgTasha.js folder still needs to be in \pics\tasha\js\ for it to work properly… at least for now!

Image Pack Usage

When you download an image pack you’ll extract it into the game directory as you would the standard image packs, only this time you’ll overwrite the applicable manifest.js file(s) and any image files that may be supplied as well. If you’re overwriting at least one .js file, you’re likely doing it right! Of course, it’s good practice to back up your game directory before overwriting any files.

For now, image packs will only be supported for local versions of the game, though online support in some form or another it being explored.