Free Cross Platform script for Photoshop + GameMaker Import Scripts + Sample Project objects.
Also, see the end of this post for a vital Photoshop workflow trick related to this asset....
This script is designed to greatly simplify moving designs from Photoshop into functioning code in GameMaker. It works in two parts: there's a script to export Photoshop elements to JSON for easy import into anything, and there's a GameMaker project file with everything needed to load images and attach them to objects via JSON.
Together, they form a complete system that's theoretically ideal for game jams , UI design, and downloadable content packages.
The Photoshop Script (.jsx file):
The script is packed in the Included Files of the project. It does *not* need to be included with your game, but I had nowhere else to put it.
You run the script with a photoshop file open (File>Scripts>Browse), and it searches for any layer or layer group with a ".png" at the end of the layer name (customizable obviously). For each item found, it writes a JSON object to a file with the exact layer bounds, layer color label, and linked layers list. This data is generally useful by itself, but I've also included GameMaker scripts.
Sample setup in Photoshop, with .png naming and color labels.
The GameMaker Scripts:
I've included a series of scripts, meant to be usable at run-time.
- unpack_package : Unzip files. If you're including your image assets as an included zip file or downloading them, you'd need this.
- json_load : You provide the json file from my Photoshop script (either as an included file or in a download), this script puts it into a json-formatted ds_map.
- load_sprites_with_json : You provide the loaded json map, and the script loads images as sprites and injects these new sprite IDs into the map.
- load_json_into_objects : You provide the loaded json map and a map that pairs Photoshop layer labels to object resource IDs. The script creates the appropriate objects and sets their sprites from the json map.
The Test objects:
You can use this system without importing any of the objects; they are part of an example.
- obj_photoshop_test_loading_images : A test object that loads a sample zip file, unpacks it, adds the images as sprites, and spawns 2 types of objects.
- obj_photoshop_test_image : Does nothing; an image placeholder for the UI to demonstrate creating an object based on color label.
- obj_photoshop_test_button : A sample "button" object with possible alternate "hover" and "clicked" images, defined through Photoshop. The first button has all 3 image states; the rest have 2 states.
The Test include files
Everything in the Photoshop_import_test folder is not needed for the system. These are example files that work with the test objects to create this UI:
- photoshop_ui-assets.zip : A set of images for a fake UI.
- photoshop_ui.psd : A sample Photoshop document demonstrating layer naming, color labels, and linking.
- photoshop_ui.json : A sample json file generated from the PSD. Used in the test object.
Have a look at the example (import all, add obj_photoshop_test_loading_images to a room) to see it all running; should be straightforward. You'll see that there's just a simple ds_map structure created in there to define which colors become which objects. (Be careful not to create the creating object or you'll spawn infinite objects).
If you want to see/change how objects are associated, have a look through load_json_into_objects.
- It iterates through the list of object/layers and checking whether the "current" layer is "linked" to any already-created object/layer.
- If not created, it creates an object, provided that the color label matches a supplied object mapping.
- If already created, it goes through links and distributes the image property to another set of variables (not sprite_index). In this way, "alternate appearance" images can be linked onto custom variables in an object.
- Link order is processed top-down, so in Photoshop, the "base appearance" of an object should be above any linked, alternate appearances in the layer stack.
It's not arbitrary that this script works on layers with .png file names. The past several versions of Photoshop have had a very powerful, useful 2D game dev feature, but not a well-advertised one.
If your version of PS is reasonably new, you have this option.
You activate the generator, and for the rest of your Photoshop session, any time you put a png, gif, or jpg extension on a layer or layer group, Photoshop will immediately export that arrangement of imagery as a trimmed image file, in a folder beside your PSD.
It updates in the background, live, as you edit. This should save you hours of cropping and saving parts of images~ And then, all that's left is to reconstitute your exported graphics in GameMaker, which is what this resource is for.