Skip to content

Creating spritesheets with Texture Packer or Free texture packer

Jump to bottom
jjppof edited this page Sep 12, 2023 · 7 revisions

You can use Atrius Golden Sun Editor to export sprites or create your own ones to build a spritesheet that Phaser understands using Texture Packer or Free texture packer. Free texture packer also has an online version.

Folder organization to generate the sheet

The spritesheets must be created per action (one spritesheet for walk action, another one for dash, idle and so on). The frames must be organized like below. Example for felix/idle/down/03.png frame:

Folder structure:

  • [sprite name (ex.: felix)]:
    • [action type (ex.: idle)]
      • [animation name (ex.: down)]
        • [files: frame_index.ext (ex.: 03.png)].

The frame files always have to be a number with two digits.

You'll probably drag and drop the action directory into the texture packer app and export the spritesheet files.

Texture Packer configs

  • Use Phaser (JSONHash) as Data Format.
  • Check Trim sprite names. (Advanced settings)
  • Check Prepend folder names. (Advanced settings)
  • Move the action folder into the Texture Packer.
  • Save your spritesheet.

Free texture packer configs

  • Use JSON (hash) as Format.
  • Check Remove file ext.
  • Check Prepend folder names.
  • Uncheck Allow rotation.
  • Click on Add folder button to select the action folder and load content into Free texture packer.
  • Fill Texture name and Save path fields.
  • Save your spritesheet.

Saving a sprite with Golden Sun Editor:

  • Load our GS ROM and go to Sprites section:

  • Click on a spritesheet on the left, then double-click on a specific sprite on the right:

  • In the new window, click on Options, then on Save sprite as image:

Animations setup in GSHTML5

Sprites animations are mainly set under database json files. Examples: interactable_objects_db.json, npc_db.json, and misc_animations_db.json. If we get an NPC, for example, it can have multiple actions and each action can have multiple animations. Currently, each action should have it's own spritesheet files (json file and image with sprites). By definition, an action is a set of animations, and an animation is a set of frames. For our NPC, walk could be an action that will contain multiple animations like up, down, right, left, etc, each animation will have a certain number of frames. This example in database file:

"actions": {
    "walk": {
        "spritesheet": {
            "json": "assets/images/spritesheets/main_chars/isaac_walk.json",
            "image": "assets/images/spritesheets/main_chars/isaac_walk.png"
        },
        "animations": [
            "down",
            "up",
            "left",
            "right",
            "down_left",
            "down_right",
            "up_left",
            "up_right"
        ],
        "frames_count": 6,
        "frame_rate": 8
    }
}

In above example, walk action will have multiple animations, one for each direction. All animations have six frames and a rate of 8 frames per second. By default, animations will loop forever.

But we may face some situations in which we want different settings per animation, so instead of setting a number in frames_count, frame_rate, or loop, we can set an array. The indexes of the array have to match with the index of the animation in animations property. The following is the interactable object for Frost psynergy where we have a pool and a ice pillar:

"actions": {
    "frost_pool": {
        "animations": ["pool", "pillar"],
        "frame_rate": [5, 8],
        "frames_count": [2, 6],
        "loop": [true, false],
        "spritesheet": {
            "image": "assets/images/interactable_objects/psynergy_frost.png",
            "json": "assets/images/interactable_objects/psynergy_frost.json"
        }
    }
}

The frost pool has a frame count of 2, frame rate of 5 and will loop. While the ice pillar has a frame count of 6, frame rate of 8 and won't loop. The pillar animation here is for when the pool is getting frozen and becoming the pillar itself.

Now, if you want even more control, you can set per-frame frame_rate, so instead of setting a number for an animation, you set an array for it. Growth sprout example:

"actions": {
    "growth": {
        "animations": ["sprout", "growing", "no_target"],
        "frame_rate": [[0.4, 2], 8, 10],
        "frames_count": [2, 6, 7],
        "loop": [true, false, false],
        "spritesheet": {
            "image": "assets/images/interactable_objects/psynergy_growth.png",
            "json": "assets/images/interactable_objects/psynergy_growth.json"
        }
    }
}

While animations "growing" and "no_target" have a fixed frame_rate of 8 and 10, respectively, "sprout" animation of 2 frames count, has a rate of 0.4 for the first frame, and 2 for the second frame.

Clone this wiki locally