Photoshop to JSON to GameMaker

Turn a Photoshop file into a game! 

Shortcut your 

• Game jams, 
• UI designs 
• Re-designs
• DLC or additional game content
• or anything driven by 2D art!

This resource  helps you to bring  Photoshop image assets into games or applications. It's a JSON file exporter for essential layer info. And if you're a GameMaker Studio 2 developer, it's also an importer!

First things First

This resource is designed to work with Photoshop's Image Assets feature. 

If you're new to it, you basically just name any layer, Smart Object, or layer group with a filename extension (like layer0.png). 

Then you go to File > Generate > Image Assets, and Photoshop automatically exports everything as image files.

Adobe Documentation: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

That part is built into PS. So what is this tool?

Now that you're exporting your images, where did all their position/relation information go? How are you going to position these graphics in your program?

The script I've included exports a json file with a list of every:

• Layer with .png  at the end of the name (customizable)
• The true x0, y0, x1, y1 corner positions of these layers, matching the exported image sizes
• The color label applied to the layer
• A list of names of layers linked to this layer and ending in .png (customizable)

You can use these properties in your import code to generate objects at the right positions and scale. And you can even use the color labels and links to assign each image to various types of objects, or to combine properties together.

How do I run the .jsx file?

With your Photoshop file open, head to File > Scripts > Browse, and select my script. It may take a few minutes to run; a box will pop up to say when it's done. The script does iterate through each layer and activate visibility, so you might want to Save first if you think this will make a mess for your file. The script does set a backup state, so that should help a bit. (If you already have a history snapshot named "BeforeExport" the script will fail to run).

And GameMaker Studio?

The rest of this tool is specific to GameMaker Studio, but I imagine you can adapt a similar system for any similar engine.

The YYMP package file can be imported into your existing GameMaker games. You'll get everything needed to use this system:

• A script for unpacking a Zip file (could contain all of your images as a supplemental file download)
• A script for loading all of the images in the Json file into your game
• A script for creating objects by mapping color labels onto object resource IDs and assigning sprites to the objects

Customization

Please customize all of this as needed! The Photoshop script, "export_layer_data.jsx" is currently coded to search your PSD for layernames with the ".png" extension, but you could change this as needed with a text editor. You can also alter the json key names--they are in the "compoundList" function.

Basically, by modifying the search parameter, you can adapt this to create a JSON for anything you can imagine from Photoshop!

Adding other layer data is possible too, but you'll need to dig into the Photoshop Scripting Guide to figure out how. Remember, Photoshop has been around for 30+ years, so...some things are more than a little odd to do (just have a look at how this script fetches the color label for a sense).

Happy to accept donations: 

Did any of this save you time? Win you a game jam? If you're willing to add a couple of dollars to this project's price of FREE, it's a little nudge that says "this was worthwhile." Let me know if this helped you!

Final Notes: 

Labels are weird.

• Violet layers are "violet." 
• Yellow layers are "yellowColor."

Terribly sorry about all of this; Adobe doesn't seem to want to have consistent internal naming. You can code adjustments to these outputs if needed, or, just be sure to look at your JSON and see what's really being printed out from PS.

Grain? What is Grain???

If you have a peek through the jsx file, you'll find a line where I'm checking whether the color of a label is grain, and changing that to green. 

Label color names are inconsistent, generally, but this one is just silly, so I've put in a "fix."

The perils of long-lasting software: the Photoshop team made a typo eons ago, and it'd break too many things to alter the property keys in the DOM now... Internally, green layers are grain layers!~