Dev Blog #72 – Illuminating Image Packs

Greeting everyone!

I know I’ve been talking about image packs a lot lately, and today I’m happy to finally dive into the technicalities of how they’ll actually work. Additionally, I have some news concerning Update 6.1.2’s release as well as an artwork update!

Update 6.1.2 – Status

Save for one or two scenes, the most update intensive work for Update 6.1.2 has been complete. That said, I’m not quite ready to commit to release date for this week, unfortunately. As it is, I fully expect the content updates to be done by this weekend, followed by bugfixes, then probably more bugfixes. All considered, a release date of Thursday, July 4th seems “Extremely Likely”. For more information as to what you can expect from this maintenance-focused update, check out last week’s development post.

I’m really excited to finally put this update behind me, because I can’t WAIT to start writing some real content again!

Image Packs – Wat Do?

Time to finally get into the nitty gritty of how image packs are going to work, and how they’ll be implemented!

Before image packs could be implemented to begin with, a few sweeping changes had to be made to the game. First and foremost, an inventory needs to be taken on what images are actually even USED in the game at all, and which ones are redundant or duplicate. Second, the actual image handling functions of the game had to be overhauled, and support for reading external files had to be implemented. Finally, with all the backend work complete, the new functions need to be implemented throughout the game, replacing the existing function calls.

So, where are we with that?

  1. Image Usage Inventory – This is being handling on a character by character basis and is currently done for Penny. This doesn’t take much time but simply hasn’t been my focus for development
  2. Image Handling Update – Done! The new image handling functions offer single-line support for all image types, as well as layered artwork.
  3. Replace Existing Functions – Conceptually done? The means of replacing the existing functions have been worked out, mostly a bunch of RegEx’s, but implementation will occur on a character to character bases rather than all at once as the image functions can all operate parallel to each other.

Because this is going to be a gradual roll-out, we’ll be starting with Penny in Update 6.1.3, then increasing the pace from there.

Okay, so, boring stuff out of the way, now on to the REALLY boring stuff!

Image Pack Creation

Starting from, well, now actually, 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}');

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. Now let’s look at Penny’s image pack manifest file, imgPenny.js…

window.imgPenny('{\
    "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('{\
"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!

AllowRandom 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('{\
"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\
...\js\
......imgTasha.js
...\tasha\
......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\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!

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.

And that’s all I have to say about image packs for now!

You Mentioned an Artwork Update

Sure did!

Those in the Marketing Associates tier have already gotten a taste of this, but I’m happy to report that a fully functional gameplay demo that shows off the new layered artwork system is currently in the works! I’m building out a bit more for those in that tier, however everyone else can look forward to seeing a public demo next month!

In it, you’ll have the chance to see how NPCs can change appearance in real time, as well as how the more intimate scenes can be constructed on the fly. This is something that’s been a long time in the works, and I’m excited to get to show it off to more people!

That’s it for this week. More concrete information concerning Update 6.1.2’s release will drop early next week and the update itself should be quick to follow. I know the trudge through this development cycle has been tough, but it’s almost behind us and what’s coming down the pipe is really exciting! Thank you all for your continued feedback and support.

Leave a Reply

Your email address will not be published. Required fields are marked *