Asset - Scripts Photoshop to JSON to GameMaker

Tsa05

Member


Free Cross Platform script for Photoshop + GameMaker Import Scripts + Sample Project objects.
https://marketplace.yoyogames.com/assets/8383/photoshop-export-and-export
https://stormingleech.itch.io/photoshop-to-gamemaker
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.
There's 2 other utility scripts in there, also. ALL scripts must be imported for this to work.

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).

The jsx file can be edited in a text editor if you want something other than layers with .png at the end. Logic can be rejiggered, too; I've separated out most of the "Photoshop" bits from the logic bits. But bear in mind Photoshop uses Javascript from 1999 with custom scripting on top, so most modern string handling isn't in there.

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.
Vital Photoshop Workflow trick:
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.
 
Last edited:

Tsa05

Member
@Mert Thanks, and yes--please do! I'd appreciate seeing and hearing everyone's experiences with it, and getting the word out helps a ton.
 

Tsa05

Member
Very minor 1.1.1 Update for some QOL additions:
  • Photoshop Export Script is unchanged.
  • GameMaker script for creating objects from JSON is updated to set "myValue" for each created object.
    • myValue is equal to the name of the layer, or a string in (parenthesis) in the layer's name.
  • GameMaker script for creating objects from JSON is updated to set "myController" for each created object.
    • myController defaults to the calling instance that ran the creation script.
  • Test Button object is updated to demonstrate basic mouse event handling.
  • Load Test Object is updated to demonstrate basic handling of an input array that is populated from the created buttons.
Intent of this update: It should now be possible to create a duplicate of the test objects, customized to use the names of your included resource files, to 1-click create a UI from Photoshop.
When pressed, Buttons now report their "value" to the controller object, which is the loader object by default.
In this way, the loader object is now able to load a zip file, create buttons and still images, and keep track of an array containing all of the buttons that have been clicked.

It's always been possible to add any method you please in order to trigger actions with buttons; this asset merely provides the means for turning design data into GameMaker structures and objects. But this update finishes the cycle with a universally easy to use method for connecting buttons to values to a control object.

It's still up to you to decide how to use the data--you could check the length of the array and use the last index to launch an action; you could use it to check whether a certain pattern was inputted...
 
Top