Skip to content

Character sprites

Jump to bottom
Hayden Schiff edited this page Nov 28, 2019 · 2 revisions

This page shows how to edit mobs' sprites and configure their animations.

Table of Contents

Pixel editing

You can use whatever image editing software you like to edit your sprites. However, it is important that individual frames of a sprite animation be combined into a spritesheet, so you'll want to use a program that can do that automatically.

The main pixel editing program we're using is Piskel, which is free and runs in your web browser. To save your work as a .piskel file, click the Save button then select "Save offline as file". To load a .piskel file, click the Save button, then select "Browse .piskel files" and choose your file.

To export your spritesheet for use with the game, first click the Export button. Make sure the scale is set to 1.0x and that the resolution is correct, then click the "PNG" tab. Under "Spritesheet layout options", I recommend setting the Columns to the maximum possible value. Under "Spritesheet file export", click "Download" to get your PNG spritesheet.

File organization

All spritesheet PNGs should go in the assets/images/ folder. You are also welcome to put your .piskel files here, but currently I believe we are keeping these in a Google Drive folder.

When naming your files, it's best to use all lowercase with no spaces or unusual characters. Your filenames should match the name of the mob that they are for. If you have multiple spritesheets for a single mob, all the filenames should still begin with the name of the mob, followed by an underscore and a descriptor (e.g. dinodog_walk.png, dinodog_jump.png).

Adding new spritesheets

Any spritesheet that will be used in the game needs to be added to the texture pack config file, assets/spritesheets.json, which you can open in a text editor (e.g. Atom, Notepad, TextEdit, etc). Each spritesheet gets a JSON object that looks like this:

     {
       "type": "spritesheet",
       "key": "example",
       "url": "assets/images/example.png",
       "frameConfig": { "frameWidth": 32, "frameHeight": 48 }
     },

Here's what each section of that object means:

  • type: This should always be "spritesheet".
  • key: The internal name for this asset. Generally you should make this match the name of the PNG file.
  • url: The path to the PNG file.
  • frameConfig: Parameters that define how big each individual frame is within the spritesheet.
    • Most likely, you will never need any more options besides frameWidth and frameHeight. However, there are a few more options supported by Phaser, which you can find in Phaser's API docs.

Configuring animations

Once you have added the spritesheets to assets/spritesheets.json, you can define animations with them in assets/animations.json. Every animation for every mob needs to be defined in this file. Here is what an example animation looks like:

    {
      "key": "Example:jump",
      "frames": [
        { "key": "example_walk", "frame": 2 },
        { "key": "example_walk", "frame": 3 },
        { "key": "example_walk", "frame": 4 },
      ],
      "frameRate": 10,
      "repeat": -1
    },

By looking at the key value, we can see that this is the "jump" animation for the "Example" mob. Every animation must have a key that begins with the name of the mob (written in CamelCase, i.e. the same way they are written in Tiled), then a colon (:), then the name of the animation. Every mob must have every one of these animations defined:

  • stand: Plays whenever the mob is standing still on the ground (or more accurately, when the mob isn't trying to move – this animation will also play if the mob is sliding on ice but not actively moving in either direction)
  • jump: Plays whenever the mob is not on the ground and has an upward velocity
  • fall: Plays whenever the mob is not on the ground and has a downward velocity
  • walk: Plays whenever the mob is on the ground and is trying to move left or right (even if it is not actually moving; e.g. running into a wall)

Note that not all of these need to be true "animations"; if you create an animation with one frame, it will just show that as a still image. Also be aware that we can easily change which animations exist and when exactly they play.

In the example animation, we can see from its options that it has 3 frames, it runs at 10 FPS, and it repeats forever. Those three frames come from 3rd, 4th, and 5th frames of the "example_walk" spritesheet, which must be defined in spritesheets.json (note that the frames start counting from 0, not 1). The full documentation for all the options that can be set for each animation can be found in Phaser's API docs.

Go to wiki home page

Clone this wiki locally