Asset - Scripts Photoshop to JSON to GameMaker

Discussion in 'Marketplace' started by Tsa05, Jun 26, 2019.

  1. Tsa05

    Tsa05 Member

    Joined:
    Jun 21, 2016
    Posts:
    548
    [​IMG]

    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.

    [​IMG]

    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:

    [​IMG]
    • 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.
    [​IMG]
    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: Jul 16, 2019
    Japster likes this.
  2. Mert

    Mert Member

    Joined:
    Jul 20, 2016
    Posts:
    360
    Just Awesome!
    Can I create a tutorial and share your extension on my blog ?
     
    Japster likes this.
  3. Tsa05

    Tsa05 Member

    Joined:
    Jun 21, 2016
    Posts:
    548
    @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.
     
  4. Japster

    Japster Member

    Joined:
    Aug 5, 2017
    Posts:
    51
    This looks fantastic Tsa05 ! - I'll have to give it a try, thanks!
     
    Tsa05 likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice