How is drawing a sprite done ?

[efly2020]

I want to make 2D games but I can't find a way to draw a sprite properly.
The attached file shows how my subroutine is letting the background peek
through the drawn sprites.

Any help is very much appreciated.

Cheers,

Ralph Flye

-- changes - added a working demo file

-- changes - added a sprite map demo file

[Petr Schreiber]

Hi Ralph,

I can see the problem.
It might be partially related to the way anisotropy and other "smoothing" filters work in combination with alpha test.
I will study the reason in more detail during the weekend.

How to fix? Use other method of filtering - %TBGL_TEX_NEAREST.
It is not good choice for 3D, but for preserving pixel art look it is the best way to go.

I attach modified code for you, let me know.


Petr

P.S. If you are interested, I can provide you with some speed optimization hints.

[efly2020]

Optimization is always cool.

Thanks for fixing the peeking through problem.
The middles of the window horizontal and vertical have some problems.
I am going to make a better test tile and examine the pixels more closely.

Ciao for now.
Ralph

[Petr Schreiber]

Hi Ralph,

I checked the image file you are using and realised it is 32x32 bitmap with 22x22 tile surrounded by blackness.

You currently render the tiles at 32x32 size, but overlap them each 22 pixels, which results in little inefficiency.

For tiles which are not masked, you can modify just the texturing coordinates.
22 pixels means use of 0.6875 of the length of 32x32 texture ( 22/32 = 0.6875 ).
So in this case, you do not need to use alpha test, just do little more precise UV ( texture coordinates ) mapping.

Instead of:


tbgl_BeginPoly %GL_QUADS
tbgl_TexCoord2D 0, 1 : tbgl_Vertex 0, 0
tbgl_TexCoord2D 1, 1 : tbgl_Vertex 32, 0
tbgl_TexCoord2D 1, 0 : tbgl_Vertex 32, 32
tbgl_TexCoord2D 0, 0 : tbgl_Vertex 0, 32
tbgl_EndPoly


you can create quad of size 22x22, with following coordinates:


tbgl_BeginPoly %GL_QUADS
tbgl_TexCoord2D 0.0000, 1.0000 : tbgl_Vertex 0, 0
tbgl_TexCoord2D 0.6875, 1.0000 : tbgl_Vertex 22, 0
tbgl_TexCoord2D 0.6875, 0.3125 : tbgl_Vertex 22, 22
tbgl_TexCoord2D 0.0000, 0.3125 : tbgl_Vertex 0, 22
tbgl_EndPoly


I attached modified code for you, let me know if it works better / the same for you.
Will you use 22x22 tiles for all game graphic tiles?


Petr

P.S. The alpha test will be needed for animated characters, which surely won't have rectangular shape.

[efly2020]

I never would have thought to try width + 1 (0..width) and height + 1 (0..height)
with TBGL_RenderMatrix2D but it works!
With the changes to TBGL_TexCoord2D and TBGL_Vertex the sprites are looking great.
A new sprite demo has been added to the first message.

Again, thanks much.

Ralph

[Petr Schreiber]

Hi Ralph,

I am happy it worked for you. There are further speed optimizations possible, I will show them to you next week, as this week I am little flooded with other things.

Your new demo is really very nice, I liked it! Really interesting graphic design as well.


Petr

[Michael Clease]

Hello Ralph,

I took a look at your script and had a quick play, I added some equates and played the code.

have a look at display lists.

[efly2020]

Hi Michael,

Your sprite demo caused me to see that a sprite map could
be done in TBGL. A sprite map would be nice if the number
of Texture Indexes were becoming scarce.

A sprite map demo has been added to the first message.
The transparency effect does not work but otherwise the demo
works great except with so many sprites it maxes a core of the CPU.

Your improvement is much appreciated.
Ralph

[Petr Schreiber]

Hi!,

this demo made my jaw drop, without any exaggeration. Superb work!

Do you want to know reason why transparency did not work? Because you supplied transparency color on place of anisotropy level :)

So correct loading code must be:


tbgl_LoadTexture APP_SOURCEPATH + "matrix_renovations_font_sprite_map.bmp", %TexNdx_MatrixSpriteMap, _
%TBGL_TEX_NEAREST, 0, rgb(0,0,0)


I attach complete corrected code for you ... and thanks for the demo, it really made me happy :)

[efly2020]

I need some help from a TBGL genius because I can't understand what
the problem is with my menu print code. I want to print a menu using
a sprite map font which can be printed on any background since the sprite
background does not print, and also have an extra font using a NeNe 2-font
texture. I have tried for many hours to find the problem however I can not
make the sprites show properly.

:( :?

[Michael Hartlef]

Hi Ralph

Nice script. Something to learn from.

Now to the code. First you were missing a TBGL_USETEXTURING . Then ... to retrieve the char code you need to use ASC and not VAL. Another thing and that is a problem with thinBasic catching the error, you wrote

x =+ 32

That doesn't work. It has to be x = x + 32.

I attached the corrected code for you. You just have to switch the orientation of the letters. I'm at work and don't have enough time for this.

Michael

[Michael Hartlef]

Btw. Ralph, I'm working on some sprite commands for TBGL these days. If Petr will approve them, then they might help you in the process of creating your game. Do you have any specific features you need?

[Michael Clease]

Here is the working version. :eusadance:

from mikes version

[Petr Schreiber]

Thanks guys for fast reply!

Ralph, did you know for printing characters from BMP you can use:
TBGL_LoadBMPFont
TBGL_PrintBMP

You can use 4 fonts at the same time if you are ... crazy enough :)

The only problem could be to create the bitmap from font, but this program does the job for you:
TBGL Font Creator (http://community.thinbasic.com/index.php?topic=1024.msg6811#msg6811)

[efly2020]

@Michael C.

Much thanks.

@Michael H.

I only need simple sprite commands such as scaling and rotation and collision detection;
but fancy things would be nice such as flip and reverse. Cycling an animation image list
forward or backward would be very fancy.

@Petr

I wanted to be able to use the same font with different backgrounds but TBGL_PrintBMP
is probably what I will use when I solve how to translate fractional increments of x into
pixel coordinates so I can use an array of character widths and print each character of
a string with proper x increments to print out the fonts proportionally because sometimes
monospacing does not look good.

I was printing the menu this way because I am also attempting to solve how to use sprites
in 3D so that TBGL will use the z coordinate of a sprite to automatically handle layers
for when one sprite is above or below another sprite.

Thanks to everyone for all of your help.
Ralph

[Michael Clease]

but fancy things would be nice such as flip and reverse. Cycling an animation image list
forward or backward would be very fancy.

Ralph you already have the code to do the above just use the textcoord look at mikes H's script the characters were upside down all I did was to flip the textcoords.

Normal on the X Axis
x1 = mod( ch, %f1Char_per_row ) * %f1Char_w_per_f1SMW ' base column
x2 = x1 + %f1Char_w_per_f1SMW
Flipped on the X Axis
x2 = mod( ch, %f1Char_per_row ) * %f1Char_w_per_f1SMW ' base column
x1 = x2 + %f1Char_w_per_f1SMW
Normal on the Y Axis
y1 = y2 - %f1Char_h_per_f1SMH
y2 = 1 - ch \ %f1Char_per_row * %f1Char_h_per_f1SMH ' base row
Flipped on the Y Axis
y1 = y2 - %f1Char_h_per_f1SMH
y2 = 1 - ch \ %f1Char_per_row * %f1Char_h_per_f1SMH ' base row

Animation is easy, again you already have done it (sort of) if you create a bitmap with all the frames in a line
CurrentFrame*(1/NumberOfFrames) would give the desired image.


I wanted to be able to use the same font with different backgrounds but TBGL_PrintBMP
is probably what I will use when I solve how to translate fractional increments of x into
pixel coordinates so I can use an array of character widths and print each character of
a string with proper x increments to print out the fonts proportionally because sometimes
monospacing does not look good.

I would use a lookup table with all the widths and/or heights of the font, you could even do the calculations of the character positions and store all that information in a UDT, doing this would save time during program execution loop.

TYPE Font_UDT
Width AS LONG
Height AS LONG
X1 AS DOUBLE
X2 AS DOUBLE
Y1 AS DOUBLE
Y2 AS DOUBLE
END TYPE


Hope this helps.

[efly2020]

Thanks M. C. for the speed tip and also for the spritemap math information.
I have been busy and this helps me to return to game coding mode. :escribe:

And for more speed and ease of game coding, I eagerly await
any added sprite commands by M. H. and Petr. :)