Tiles & Sprites

[Kgm]

Hi,

Is there a way to access SpriteSheet.SpriteData directly from ZExpression? New addition to RenderSprite is nice but it has its limits (no batching support yet) so I would like to script my own drawing function instead.

[Kjell]

Hi Kgm,

Is there a way to access SpriteSheet.SpriteData directly from ZExpression?

Not at the moment unfortunately .. and shorts aren't supported yet either ( which is what the SpriteSheet data is stored in ).

New addition to RenderSprite is nice but it has its limits (no batching support yet) so I would like to script my own drawing function instead.

When you want to render tons of sprites ( that use the same spritesheet ) batching is definitely a good idea yes. I'd recommend using a external spritesheet editor and pasting / storing the data in a persistent array for now. Alternatively you could copy the binary blob ( CDATA ) from a SpriteSheet component to a ( byte ) Array component and convert it to integers. Attached is a quick example / converter.

K

[Kgm]

Hi Kjell,

Alternatively you could copy the binary blob ( CDATA ) from a SpriteSheet component to a ( byte ) Array component and convert it to integers. Attached is a quick example / converter.
K

Nice trick! I honestly didn't think of it that way, thanks!

PS: I am still waiting for your "Automatically generate sprite definitions" feature.

[Rado1]

Several ideas:

1. In the current implementation, the buttons on SpriteSheet.SpriteData property do not work - "Clear" has no effect and "Import" generates error. It would be nice to fix them.

2. Because the current sprite sheet editor is quite cumbersome (actually, it's not bad but it's difficult to work with it), there should also be the possibility to import sprite data and/or edit in the form of 2D persistent numeric Array (one dimension for vector (X, Y, width and height, origin X, origin Y), second dimension for sprite index). If also copy/paste functionality is allowed as in persistent array editor, the "Import" button can be removed if you do not plan to support some sprite sheet format for now. Of course, accessing the SpriteData from expressions should be allowed as well. This functionality can "easily" be achieved, e.g., by adding a new SpriteDataArray property which would allow to select an array that plays the role sprite data (X, Y, W, H, OX, OY - either as 1D or 2D array); similarly to RenderText.TextArray.

3. Another possibility to improve usage of the SpriteSheet editor would be to implement automatic sprite boundary detection, similarly to darkFunction Editor, see: https://www.youtube.com/watch?v=zMZa3TG58lQ Of course, manual defining and adaptation of automatically computed boundaries is still necessary.

4. Export and/or preview of manually edited sprite data. Again the form of the editor for persistent numeric arrays would be sufficient.

[Kjell]

Hi Rado1,

There should also be the possibility to import sprite data and/or edit in the form of 2D persistent numeric Array

Agreed.

Another possibility to improve usage of the SpriteSheet editor would be to implement automatic sprite boundary detection

This was / is planned, and basically worked ... but not when used as custom editor for some reason ( reading the pixel data fails ). I'll look into it again.

+ There is a way to import the data already, but it's far-from-ideal / quite-cumbersome. Nevertheless, for the time being ...

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" FileVersion="2">
  <Content>
    <Array Name="Input" Type="1" Dimensions="1" SizeDim1="4" SizeDim2="6" Persistent="255">
      <Values>
<![CDATA[78DA636080000128E68062011CE20A38C40D7088030032E00121]]>
      </Values>
    </Array>
    <Array Name="Output" Type="4" Dimensions="1" SizeDim1="4" SizeDim2="12" Persistent="255">
      <Values>
<![CDATA[78DA636060601000420E201440622B20B10D90D80019700121]]>
      </Values>
    </Array>
    <ZExpression Comment="Convert">
      <Expression>
<![CDATA[//

Output.SizeDim1 = Input.SizeDim1;

//

int i, w;

for(int s=0; s<Input.SizeDim1; s++)
{
  i = 0;

  for(int d=0; d<6; d++)
  {
    w = Input[s,d];

    Output[s,i++] = w & 0xFF;
    Output[s,i++] = w >> 8;
  }
}]]>
      </Expression>
    </ZExpression>
    <Bitmap Name="MyBitmap" Filter="1"/>
    <SpriteSheet Name="MySpriteSheet" Bitmap="MyBitmap">
      <SpriteData>
<![CDATA[78DA636060601000420E201440622B20B10D90D80019700121]]>
      </SpriteData>
    </SpriteSheet>
  </Content>
</ZApplication>

- Open the project shown above.
- Import your spritesheet image into the MyBitmap component.
- Edit Input.SizeDim1 to match to number of sprites of the spritesheet.
- Use the Edit dialog of the Input array to paste your spritesheet values ( x, y, width, height, origin.x, origin.y ).
- Run the "Convert" ZExpression ( select and press F5 ).
- Open the XML dialog and copy-paste the CDATA string from Output.Values to MySpriteSheet.SpriteData.

K

[Rado1]

Hi Kjell,

This was / is planned, and basically worked ... but not when used as custom editor for some reason ( reading the pixel data fails ). I'll look into it again.

Yes please. This will be very useful feature.

+ There is a way to import the data already, but it's far-from-ideal / quite-cumbersome. Nevertheless, for the time being ...

Yes, that's far from ideal state.
Rado1.

[Kjell]

Hi guys,

Got it working .. silly mistake



Update soon ~

K

[Rado1]

Nice!

[rrTea]

I use tiles a lot, they are great! I slightly miss an option to see a tile's number (maybe on mouse overlay tooltip style, or somewhere in the corner), just a thought. Maybe it's worth mentioning that I sometimes get framerate problems when I render tons of them of them (300 or so) in one pass but that quite probably falls under "abusing the component" and I'm not supposed to actually do that.

[uederson]

Hi all!
My name is Uederson.
I was a Game Maker user in the past, but for some reasons $$$ I started using love2D .
Now I found the ZGE, I want to port my little 2D game to it.
The game on youtube:
https://youtu.be/j9emT2UIRBM

I think the best way of learn something is by trying. I've readed a lot of things but I am not able yet to know how to start, then I would like to ask you guys please if you can point me some tutorial step by step showing how to create and show sprite animation in ZGE. I need to create a walk cicle for the character of my little game.

Thanks in advanced! Btw, thanks for the great tool!

[VilleK]

Hi Uederson!

None of the built in demo projects use the SpriteSheet components because it is a quite recent addition. Here I attached a minimal demo project that you can look at. Let us know if you need more help.

[uederson]

Thank you, Villek! I will check it right now.

[Rado1]

During these two days I learned Tiled map editor and saw it quite useful for ZGE. Especially, import of CSV files is simple; you can either:

1. directly represent your maps as 2D or 3D (for multi-layered maps) persistent arrays and copy/paste content of CSV from e.g. Excel to ZGE array editor, or,
2.load CSV files to ZGE application in runtime.

For the second option I created an example with a small library "Tiles library" for loading and rendering maps

tilemap.zip

(198.28 KiB) Downloaded 598 times

The example uses isometric dungeon tiles for multi-layered maps. The library is not super reusable and flexible, but it's not the point. The point is to show how simple can Tiled cooperate with ZGE.

Map in ZGE application

scr2.png (25.31 KiB) Viewed 17466 times

Map in Tiled editor

scr1.png (45.5 KiB) Viewed 17466 times

[VilleK]

Nice . First time I've seen isometric stuff in ZGE.

[uederson]

Hi all!
Villek, thank you by the great example you give me. Thanks to you I'm learning a lot.
I have a question.
How you can see in the attached picture, in my project I need to load a sprite and show it in several places at same time.
In lua, I did it using arrays. I use 3 arrays. One for x position, one for y position, and one for the sprite number. Sprite number is: 0 = none, 1= grey stone, 2= yellow stone, 3 = blue stone...
Always lua finds a numer inside the sprite number array, it draws the equivalent stone.
To create the level from the picture, I did:
{2,2,2,2,2,1,2,2,2,3,2,2
2,0,0,0,0,0,0,0,0,3,0,2
2,0,2,2,2,2,2,2,2,3,2,2...

I know how to show the sprites in ZGE using RenderTransformGroup, but sadly I need to use one RenderTransformGroup for each sprite instance.
Is there some way of to create RenderTransformGroup by code? I would like to do it like I did in lua, showing instances of the sprite using array if possible.

Btw, nice isometric example from Rado!

Thanks in advanced!

Uederson