Sprite Sheet Replacement

Sprite Sheet Replacement

The Sprite Sheet Replacement window allows you to configure a sprite sheet (to learn more about sprite sheets, check this tutorial that will appear in replacement of the original layer content. For example, you can replace a blank rectangle image from your layer with a sprite sheet in your final project. Select the layer you want to replace and click the Sprite Sheet replacement. The following window appears:

Information about the current layer content will appear in the top of the window (position and size). It is important to match the same layer content size and position with the final sprite sheet size.

• Use same sheet as: If you have used sprite sheets in the same page, you have the option to use the same file (and external tool file, if this is the case). This option should be used in the case you have several sprite animations in the same sheet file. Using it, the external file will be loaded only once (memory save).

  Tip from JB Tellez: There’s a “gotcha” that can cause a crash. It’s not a bug, but may seem like it when starting out. When multiple layers share a sprite sheet then the “source” layer needs to be below the “sharing” layers in Photoshop layer panel. So if you’ve got layers named sprite1 thru sprite5 and you want sprite2 thru sprite5 to share sprite1’s sheet then sprite1 layer must be lower than the other “sharing” layers.

• File points to the image sprite sheet external file (this is the file containing your images). Use the Browse button to find it. You can create sprite sheets files from different software or just use the free, installed with Kwik, Photoshop Sprite Sheet Exporter (more on that at http://kwiksher.com/tutorials_kwik/tutorial-sprites/).

Import coordinates from External Tool

• File: the lua file Texture Packer exported for Solar2D

If you created your sprite sheet file from a tool like Texture Packer, and the frames of each image are not fixed (sprite sheets can have fixed size frames or they can be optimized removing all empty spaces around the images), you will need to import the Lua file created from the tool, containing the information about each frame. Use the Browse button to find it.

Manual entry panel

only if you are using same size frames .this is not necessary if you create your sprite sheet file from an external tool:

If you created your sprite sheet file with same size frames, enter the following:

• Frame Width: width of each frame. Kwik sets it based on the layer content width. Feel free to change it;

• Frame Height: height of each frame. Kwik sets it based on the layer content height. Feel free to change it;

• Sheet Width: width of the full sheet file;

• Sheet Height: height of the full sheet file;

• Sequences: If you have more than one animation in the sheet file, you can create different sequences for each animation. For example, you may have a bird that dances then, when clicked, flies away from the screen.

  If you don’t set a sequence, only a “default” one will be created, with the data from the sequence fields.

• Name sets the name of the sequence.

• Start Frame informs the first frame that will play when the animation starts. If you enter numbers separated by commas, Kwik will set is as a non-consecutive sequence.

• Frame Count informs the total number of frames that will play when the animation starts.

• Loop defines the amount of times the animation will play. Forever will play the animation until you leave the page. Times allows you to enter the number of times you want to repeat the animation.

• Length sets the interval, in seconds, that the animation will play between each frame.

• Pause at frame 1 checkbox: If enabled, it will pause your animation when the page starts. You will need a timer, a button or other type of interaction in order to start the animation.

• Reverse after the last frame checkbox: If enabled, it will play the animation backwards when it reaches the last frame.

Sequences list

it shows all created sequences.

To create a sequence, just enter all the information needed in the Sequence fields then press the (+) PLUS icon.

If you need to edit one of them, click the row and edit the parameters, and press the (+) icon.

For moving up/down an row of sequences table, or for deleting a sequence, you can click Select icon. Then you can able to select a row to be deleted or to move up/down.

Create @2 sheet file

• Create @2 sheet file automatically, if needed tells Kwik to create low resolution version of the sheet file, when the project (Universal projects, for example) will be seen in lower resolution devices.