Creating characters and sprite sheets – version Español

TODO: featured image

Tutorial para las versiones 1.1.0 para arriba. Si no tenés la última versión la podés bajar de Desura clickeando acá. Este tutorial puede ser re-escrito para mayor claridad.

English version

Así que querés crear un personaje o sprite sheet (o usar los ya creados) en Plataforma? Seguí esta guía simple y vas a terminar en dos toques!

Las Herramientas

Te recomiendo que uses Inkscape, ya que es el que uso yo. No estas forzado a usarlo y, por ejemplo, podes usar Photoshop, Fireworks o cualquier editor con el que te sientas cómodo. En este tutorial voy a usar Inkscape como ejemplo. Además, yo proveo los archivos .svg (archivos de proyecto de Inkscape) de mis personajes y sprite sheet creados, junto con la descarga del juego. Esos archivos .svg te ayudan a modiciar los personajes y usarlos como esquema. Además, me gustan los gráficos vectoriales.

Tiled  es un editor de mapas, y es que yo uso para Plataforma. Pero esperá, esto no es el tutorial de niveles! Por qué esta Tiled acá? Tiled te puede ayudar a previsualizar tus sprite sheets sin abrir el ejecutable del juego. Además, te ayuda a previsualizar casos no presentes en ningún nivel existente. Para saber como hacerlo, podés ir al tutorial de niveles haciendo click acá, pero también hay una mini-explicación en este tutorial.

Video tutorial

Si no te gustan los tutorials escritos, podés ver este video que te va a explicar como crear personajes y sprite sheets, y como usarlos dentro del juego. Tiene audio en español así que no vas a tener problema en entenderlo.

 

Suscribite sin irte de la página!

Tutorial Escrito

También hay un tutorial escrito incluído con la descarga del juego. Yo recomiendo seguir este, ya que tiene imágenes que te van a hacer entenderlo mejor.

Personajes

Creando un Personaje

Esta es la hoja de personaje del personaje original de Plataforma. El archivo se encuentra en la subcarpeta “DONDE-LO-INSTALASTE/plataforma/recursos/imagenes” y su nombre es “personaje.png“. Si lo bajaste de Desura y estas usando Windows, probablemente sea: “C:/Program Files/Desura/Common/plataforma/recursos/imagenes”. (O “archivos de programa” en vez de “program files”)

personaje

Pero esperá…ese personaje se ve raro no? Para entenderlo subdividilo en dos: La parte de arriba, la cual contiene los cuadros (frames) cuando el personaje se mueve hacia la derecha, y la parte de abjo, la cual contiene los cuadros cuando el personaje se mueve hacia la izquierda. Cada uno de estos cuadros tiene un tamaño de 64×64 pixeles, y se toman de izquierda a derecha como lo indica el esquema siguiente:

template
As you probably realized, the character sheet is always 128 pixels high. The width of the image correlates to the amount of frames your animation has. The original characters have 5 frames of animation each, so the image is 320×128 pixels. If you have 10 frames of animations it would be 640×128 pixels. Generically, N amount of frames 64*Nx128 pixels. While the original characters have 5 frames of animation each, you are not forced to have 5 frames of animation. As you probably realized, you are free to have any number of frames you like. Keep in mind that both the left and the right animations will have the same amount of frames, and that each frame will play for 0.1 seconds.

The original character it looks like this walking to the right:

derecha

And like this walking to the left:

izquierda

Okay, so you made a character, but you are still in the graphics editor. If you are using Inkscape, you need to select the image/images and go to “File”>”Export Bitmap…” and you will find something like this:

export

The important parts:

  1. Bitmap size. It should be width = 64*N (where N is the amount of frames) and height = 128 pixels.
  2. Filename. Choose where you want to export it. See the Usar un Personaje Creado section to know how to use them in-game.
  3. Check “Hide all except selected” on the bottom left if you want to export only what you selected. If you have some kind of transparency or head bobbing, this is probably a must as you don’t want to export what’s behind the character.

If you don’t use inskcape, export it/save it in the way your graphic editor lets you. Remember to export is as a .png As long as you limit yourself to the boundaries written in this tutorial, it will work.

Modificar un Personaje

If you want to modify a character, I recommend you using inkscape as I provide the project files for the created characters. Open the .svg and modify it how you want it. Of course, you are still limited to the 64×64 pixels size. You can also modify the .png files with your editor of choice and it will be reflected in-game.

Usar un Personaje Creado

This part of the tutorial will be the same whether you created a character from scratch, or you want to use an already created character.

Let’s assume you have a character named “coolChar.png” that you want to use in-game.

  1. Copy “coolChar.png” to the subfolder “WHERE-YOU-INSTALLED-IT/plataforma/recursos/imagenes”. If it is already in there, you can skip this step.
  2. Rename the “personaje.png” as something so you don’t lose data, for example “originalCharacter.png”.
  3. Rename “coolChar.png” to “personaje.png”

And there you go! You are using your character in-game, congratulations!

Note: You don’t need to close plataforma.exe to do this. The new character will load when the new level loads. However, keep in mind to have a “personaje.png” file in the “WHERE-YOU-INSTALLED-IT/plataforma/recursos/imagenes” subfolder, or the game might crash.

Sprite sheets

First of all, what is a sprite sheet? A sprite sheet is a compilation of images, or sprites. As you probably realized, the character sheet is a sprite sheet as well! Plataforma’s sprite sheet is subdivided into sections. Each section will be explained below the image. Keep in mind that each individual sprite is 64×64 pixels.

sprite sheet explained

Tiles which are considered…

  • Floors: Rows 1,2 and 3 complete, and row 4 column 10
  • Spikes/Hazard: row 4 column 1
  • The door: row 5 and 6, only columns 1 and 2. The four sprites makes one door.
  • Checkpoint: row 5 column 3
  • Collectibles: Extra life (row 5 column 4) and coins row 6 columns 3, 4 and 5.
  • Spawner (This doesn’t get seen in-game, it’s just for the level making): row 7 column 1
  • Locks: Row 8 complete. Yes, complete. This means you can add locks from columns 5 to 10
  • Respective buttons: Row 9 complete (Button) Row 10 complete (clicked button)
  • The rest of the sprites have undefined behaviour in-game (this means, crazy stuff may happen). If you have an idea about what to do with those spaces, tell me about it!

Crear una sprite sheet

As long as you comply with the above list, you can make it with whatever editor you like. Of course, the sprite sheet used in-game doesn’t have those numbers. Click here to know how it looks like. Keep in mind that each individual sprite is 64×64 pixels, so the sprite sheet size is 640×640 pixels. Check the FAQ for a video where it explains how to create a seamless sprite sheet.
Then, you export it in the same way you exported the character. Again, if you don’t use inskcape, export it/save it in the way your graphic editor lets you. Remember to export is as a .png As long as you limit yourself to the boundaries written in this tutorial, it will work.

Modificar una sprite shet

Again, I recommend you to use inkscape as I provide the project files for the created characters. If you want to modify a sprite sheet, open the .svg and modify it how you want it. Of course, you are still limited to the 64×64 pixels size. You can also modify the .png files with your editor of choice and it will be reflected in-game.

Usar una sprite sheet creada

This part of the tutorial will be the same whether you created a sprite sheet from scratch, or you want to use an already created sprite sheet.

Let’s assume you have a sprite sheetnamed “coolSpriteSheet.png” that you want to use in-game.

  1. Copy “coolSpriteSheet.png” to the subfolder “WHERE-YOU-INSTALLED-IT/plataforma/recursos/imagenes”. If it is already in there, you can skip this step.
  2. Rename the “sprite sheet.png” (NOTE THE SPACE) as something so you don’t lose data, for example “originalSpriteSheet.png”.
  3. Rename “coolSpriteSheet.png” to “sprite sheet.png”

And there you go! You are using your sprite sheet in-game, congratulations!

Note: You don’t need to close plataforma.exe to do this. The new sprite sheet will load when the new level loads. However, keep in mind to have a “sprite sheet.png” file in the “WHERE-YOU-INSTALLED-IT/plataforma/recursos/imagenes” subfolder, or the game might crash.

Previsualizar sprite sheets

If you don’t want to open the executable, and go through the levels to see how your sprite sheet looks, you can use Tiled. Tiled is a map editor, that can open up the .tmx files present in the “/plataforma/niveles” subfolder. How can you use it to your advantage? Well, after you made a sprite sheet and it is located in the “/plataforma/recursos/imagenes” subfolder in the way “Usar una sprite sheet creada” section explains, you can open any .tmx files (for example nivel15.tmx) and it will show how the level 15 looks with your sprite sheet.

In this way, using Tiled will help you to know how your sprite sheet looks faster than playing the levels. It is recommended to play the levels as well so you can know how the player will see the screen.

Note: If you haven’t seen the changes in tiled, try re-opening the .tmx file. Tiled loads the sprite sheet at the start, and doesn’t “refresh” it (to the best of my knowledge).

Compartilo!

If you made a cool character or sprite sheet, don’t be shy and share it! If it is well recieved, it might get to an official release and your name will be on the credits.

Preguntas Frecuentes

  • Do I have to make the characters squared?
    • No. As long as you stick to the 64×64 pixels boundary, you can do whatever shape you want. Check this crocodile example made by Nicoláscroco
  • IT CRASHED, OH GOD PLEASE HELP ME.
    • Don’t worry! If it crashed when the level was starting check a few things:
      1. The name file: “personaje.png” if you made a character, and “sprite sheet.png” if you made a sprite sheet. There’s a space betweeen “sprite” and “sheet”.
      2. Check the Color Depth (Also known as Bit Depth). One user reported that one character didn’t work with 16 bits, but it did work with 8 bits. The original characters use 32 bit depth.
  • It didn’t crash when the level loaded/It still crashed, now what?
    • Leave me a comment explaining exactly where it crashed. There’s no need to provide your name or e-mail (I know it has a ‘*’ but trust me). However, it would be nice to know it’s the same person I am talking to, so please use at least a nickname.
  • Hold it pal, how do I create a seamless sprite sheet. Mine doesn’t “match up”.
    • Creating a seamless is not an easy task. Check this video to see an example. The example itself starts at 8:20. However, I recommend you to watch it all the way. I know it is on Photoshop and not on Inkscape, but the guy explains it so well it deserves to be in this FAQ.

     

Add a Comment

Your email address will not be published.