Guru
Joined: 11/12/2012
Location: United KingdomPosts: 11174
| Posted: 06:57pm 16 May 2020 |
Sprites and how to create them
Sprites are somewhat complex and in any case they are just something reserved for games programmers. Wrong on both counts as we will see.
The concept of a sprite is simple. It is an image stored in the computer memory. It can be written to the screen like any other image. However, what makes a sprite special is that any decent implementation of sprites will have the capability of storing what is on the screen in the area that the sprite will be displayed and this happens automatically without additional code from the user of the sprite.
What this means is that it is possible to write code that displays a sprite and then remove it and the display will be restored exactly like it was before. Perhaps more usefully you can display a sprite and then repeatedly move it on the screen and with each move the original screen image will be restored to create the illusion of the sprite moving across and in front of the original screen image. We will show simple examples of this later in the next post.
Before proceeding to load some sprites it is important to understand how sprites are stored in the CMM2 memory. Each sprite when created has two areas of memory allocated to it. Both are the size needed to store a bounding rectangle with width and height equal to the maximum dimensions of the sprite. One of the memory areas holds the sprite image itself. The other is an empty slot ready to hold the image that was on the screen when the sprite is displayed. In both cases the number of bytes is also dependent on the current colour depth of the video mode in use - either one or two bytes per pixel.
The CMM2 supports up to 64 sprites numbered 1 to 64 and the number is used whenever we want to refer to a particular sprite. Setting up constants at the top of a program would be a good way to make your code more readable when using sprites
Now we know what a sprite is we need to know how to create one. On the CMM2 there are four methods of creating a sprite
1. Load a sprite from an ascii file in the same way as was done on the original Colour Maximite
2. Load a sprite from a PNG (Portable Network Graphics) format file
3. Create a sprite by reading from what is already displayed on one of the CMM2 video pages
4. Copy an existing sprite to create a new one.
We will look at each of these in turn:
Load a sprite from an ascii file
The CMM2 supports creating sprites by reading in an ascii file formatted as described in the Colour Maximite manual with a key enhancement: CMM2 sprites can be any width and any height.
Sprites are loaded from Maximite style SPRITE files using SPRITE LOAD filename$. There is now has an optional parameter available in the first line of the sprite file. The definition of the new first line is
Horizontal size in pixels(need not be 16), No. of sprites described in the file, Vertical of sprites in pixels (need not be 16)
If the Vertical size parameter is omitted then the first parameter is used for both width and height allowing complete compatibility with CMM sprite files
e.g. a red mouse pointer 13 pixels wide and 19 high
13,1,19
4
44
4 4
4 4
4 4
4 4
4 4
4 4
4 4
4 4
4 4
4 4
4 444444
4 4 4
4 44 4
4 4 4 4
44 4 4
4 4
4444
To create the sprites described by the file we use the command:
SPRITE LOAD fname [,start_sprite_number]
SPRITE LOAD loads CMM1 style sprite files. You can load multiple CMM1 style sprite files by specifying the start sprite number of each file making sure they don’t overlap. The start sprite number defaults to 1 if not specified.
To try this method, save the above as "mouse.spr"
Then:
SPRITE LOAD "mouse.spr",5
SPRITE SHOW 5,100,100,1
SPRITE SHOW 5,100,100,1
Note CMM style sprite files are limited to the 8 CMM colours and use the CMM colour coding. Ignore for the moment the specifics of the SPRITE SHOW command , we will get to that later.
Load a sprite from a png file
This method can be slightly more complex but is much more powerful not least because the images can be full colour.
If you google "png transparent" and look at the images found you will see lots that look like this:
Note that surrounding the butterfly there appears to be a chequerboard pattern. This identifies areas in the image where there is nothing there. This is different from the butterfly appearing on a black or white background. In this case the background is non-existent or see-through. PNG files that look like this will have been written in ARGB8888 format and these files are ideal for creating sprites.
The format of the command for creating a sprite from a PNG file is:
SPRITE LOADPNG spriteno, fname$ [, transparency_cut_off]
The first two parameters are obvious, the number of the sprite we are creating and the name of the png file we will be reading from. The last transparency_cut_off parameter is optional and defaults to 8. It determines how the A level in ARGB8888 will be treated. In the png file A can be a value between 0 and 255 but to keep things simple the CMM2 will treat each pixel as being fully transparent or fully solid. The CMM2 firmware divides the A value in the png file by 16 and then compares it with the transparency_cut_off. If it is greater or equal to transparency_cut_off the pixel will be a solid colour. If it is less it will be completely transparent.
This distinction is important as it allows us to have both transparent pixels and solid BLACK pixels. i.e we don't have to specify a particular colour to be "transparent"
In the next post we will use sprites read in from png files in the examples but we for now we know how to load them.
Create a sprite by reading from what is already displayed on one of the CMM2 video pages
This can be the simplest way of creating a sprite. We simply specify that we want to read what is on one of the video pages and create a sprite from it
Given that, the syntax is obvious:
SPRITE READ [#]n, x , y, w, h
This says create sprite number n by reading what is on the screen in the rectangle with top left coordinate x,y and width w and height h. There is just one added component to this: SPRITE READ will read from the PAGE currently specified by PAGE WRITE. This allows us to read in sprites without changing PAGE 0 which is always being displayed.
Suppose we want a sprite which is simply a red box 10x10 pixels
PAGE WRITE 1
CLS RGB(RED)
SPRITE READ 1, 0, 0, 10, 10
PAGE WRITE 0
SPRITE SHOW 1,100,100,1
would do the job and display the sprite on the display without having to see its creation.
Note BLIT READ and SPRITE READ are identical and do exactly the same thing.
Copy an existing sprite to create a new one
As mentioned earlier, each sprite created uses two RAM buffers one for the sprite and one to store the display contents when the sprite is shown. This can use quite a lot of memory for big sprites. However, if we want many sprites that are based on the same image ( the blocks in this demo are all sprites) we can copy one sprite to many others and the "children" sprites will only take the one memory buffer needed to save the screen but share the image with the "parent"
The syntax for copying sprites is:
SPRITE COPY [#]n, [#]m, nbr
This makes a copy of sprite “n” to “nbr” of new sprites starting a number “m”.
The code from the demo uses both this and SPRITE READ to create the block sprites
' Draw one box of each colour
Box 401,1,18,48,2,RGB(green),RGB(Magenta)
Box 421,1,18,48,2,RGB(red),RGB(cyan)
Box 441,1,18,48,2,RGB(yellow),RGB(blue)
Box 461,1,18,48,2,RGB(white),RGB(red)
Box 481,1,18,48,2,RGB(Magenta),RGB(GREEN)
' read in each block as a parent sprite
SPRITE read 10+i,401,1,18,48
SPRITE read 18+i,421,1,18,48
SPRITE read 26+i,441,1,18,48
SPRITE read 34+i,461,1,18,48
SPRITE read 42+i,481,1,18,48
'copy each parent to 7 children
SPRITE copy 10,11,7
SPRITE copy 18,19,7
SPRITE copy 26,27,7
SPRITE copy 34,35,7
SPRITE copy 42,43,7
We now know how to create sprites and can think about the pros and cons of the various methods. Next post we had better start looking at how to use them
Edited 2020-05-17 05:11 by matherp