48
edits
Changes
Jump to navigation
Jump to search
→Tiled Layers
Line 1,376:
Line 1,376:
== Tiled Layers ==
== Tiled Layers ==
+
+Say you have an animation that requires 12 different frames for moving left, right looking up etc, it’s not very practical to load all of those 12 images individually, so many programmers opt for using a ‘sprite sheet’, this is a single image that is made up of a whole series of frames, an example of a sprite sheet:
+
+[[Image:Flexfig11.png]]
+
+As you can see, it’s easier to load this than the 96 individual images on that sheet. If we were to load that using the LoadImage() function it would just load the entire thing and assume it to be a single object, so that’s where Libwiisprite makes life easier again. With the TiledLayer class, we are now able to load an image then pass it to the functions that will split it up for us (given a few numbers) and then we have a nice animation we can play around with.
+So, first thing we need to do is load in an image so we must create an Image object
+
+<source lang="cpp">Image spirteSheet;</source>
+
+For this example, imagine this is our sprite sheet that we will be using throughout the program:
+
+[[Image:Flexfig12.png]]
+
+Obviously, this is demonstration purposes only, you would consider things like deleting all pixels that you don’t need, white pixels and invisible, they are white... So deleting them will make your image smaller and look much better when copied to the front buffer.
+
+Now imagine a grid system on this, where the there are a total of 4 tiles vertically and 2 horizontally, like this:
+
+[[Image:Flexfig13.png]]
+
+
+Now that you know what I’m talking about, we now load
+then image from memory or from file:
+
+<source lang="cpp">if(spirteSheet.LoadImage("spirteSheet.png") != IMG_LOAD_ERROR_NONE)exit(0);</source>
+
+or
+
+<source lang="cpp">if(spirteSheet.LoadImage(spirteSheetImage) != IMG_LOAD_ERROR_NONE)exit(0);</source>
+
+
+Instead of creating a Sprite object and passing it the address of the Image object, we set up a TiledLayer object and call its constructor, so let’s take a look at the constructor:
+
+<source lang="cpp">Constructor & Destructor Documentation
+wsp::TiledLayer::TiledLayer ( s32 columns,
+ s32 rows,
+ u32 ani
+ )
+Constructor.
+Parameters:
+ columns The number of columns.
+ rows The number of rows.
+ ani The possible number of tiles with animations.</source>
+
+
+If we look at our sprite sheet we can see that there are 4 rows (rows go these ways <-> ) and 2 columns (go up and down). The number of possible animation tiles is rows times columns which gives us all of our values, 2, 4 and 8 (remember to include tiledlayer.h):
+
+<source lang="cpp">TiledLayer ourTileObject(2, 4, 8);</source>
+
+This determines how our image will be split up. The width of each tile will be the images native width divided by the number of columns you input, and the height of each tile will be the images native height divided by the number of rows you pass to the constructor.
+Now we have a TiledLayer object setup called ourTileObject (excellent name I believe), now we need to load our image into it, we do this using the function called SetStaticTileset()
+
+<source lang="cpp">void wsp::TiledLayer::SetStaticTileset ( Image * image,
+ u32 tileWidth,
+ u32 tileHeight
+ )
+Parameters:
+ image The image to set as the new Tilesetlayer. If the Image has more or equal tiles, the data won't change.
+ tileWidth The width of each tile.
+ tileHeight The height of each tile.</source>
+
+The first parameter is simply the address of Image object called spriteSheet, the second ones aren’t difficult but I will explain. For our above sprite sheet, the resolution is 100 x 200, that is, 100 pixels across by 200 pixels down, the width of each tile is 50 pixels (total width divided by total number of columns) and the height of each tile 50 pixels (total height divided by total number of rows). So we can fill in the parameters as follows:
+
+<source lang="cpp">ourTileObject. SetStaticTileset(&spriteSheet, 50, 50);</source>
+
+This will pass our sprite sheet to outTileObject and specify that each tile must have a height and width of 50 pixels. Each tile is assigned a unique index number. The tile located in the upper-left corner of the Image is assigned an index of 1. The remaining tiles are then numbered consecutively in row-major order (indices are assigned across the first row, then the second row, and so on). These tiles are regarded as static tiles because there is a fixed link between the tile and the image data associated with it.
+
+A static tile set is created when the TiledLayer is instantiated; it can also be updated at any time using the SetStaticTileset() function. In addition to the static tile set, the developer can also define several animated tiles. An animated tile is a virtual tile that is dynamically associated with a static tile; the appearance of an animated tile will be that of the static tile that it is currently associated with.
+
+Animated tiles allow the developer to change the appearance of a group of cells very easily. With the group of cells all filled with the animated tile, the appearance of the entire group can be changed by simply changing the static tile associated with the animated tile. This technique is very useful for animating large repeating areas without having to explicitly change the contents of numerous cells.
+
+Animated tiles are created using the CreateAnimatedTile () function, which returns the index to be used for the new animated tile. The animated tile indices are always negative and consecutive, beginning with -1. Once created, the static tile associated with an animated tile can be changed using the SetAnimatedTile () function.
+
+[[Image:Flexfig14.png]]
+
+ The TiledLayer's grid is made up of equally sized cells; the number of rows and columns in the grid are specified in the constructor, and the physical size of the cells is defined by the size of the tiles.
+
+The contents of each cell is specified by means of a tile index; a positive tile index refers to a static tile, and a negative tile index refers to an animated tile. A tile index of 0 indicates that the cell is empty; an empty cell is fully transparent and nothing is drawn in that area by the TiledLayer. By default, all cells contain tile index 0.
+
+The contents of cells may be changed using SetCell () and FillCells() Several cells may contain the same tile; however, a single cell cannot contain more than one tile. The following example illustrates how a simple background can be created using a TiledLayer.
+
+[[Image:Flexfig15.png]]
+
+In this example, the area of water is filled with an animated tile having an index of -1, which is initially associated with static tile 5. The entire area of water may be animated by simply changing the associated static tile using setAnimatedTile(-1, 7).
+
+[[Image:Flexfig16.png]]
+
+'''Rendering a TiledLayer'''
+
+A TiledLayer can be rendered by manually calling its paint method; it can also be rendered automatically using a LayerManager object.
+
+The paint method will attempt to render the entire TiledLayer subject to the clip region of the Graphics object; the upper left corner of the TiledLayer is rendered at its current (x,y) position relative to the Graphics object's origin. The rendered region may be controlled by setting the clip region of the Graphics object accordingly.
+
+Now we know how to use the main part of the functions, we will now take a look at some more functions that will help you use tiles in your programs. First I will go over a series of ‘get’ functions, the first of which is GetRows() (and GetColumns() . They are both defined as:
+
+<source lang="cpp">u32 wsp::TiledLayer::GetColumns ( ) const
+Gets the size of the columns.
+Returns:
+The size of one column.</source>
+
+And
+
+<source lang="cpp">u32 wsp::TiledLayer::GetRows ( ) const
+Gets the size of the rows.
+Returns:
+The size of one row.</source>
+
+Very easy to use function, just call it and it return a type u32 of the number of columns or rows in that Object. The next is a handy function for getting the address of the image passed to the TiledLayer object:
+
+<source lang="cpp">const Image* wsp::TiledLayer::GetImage ( ) const
+Gets the image of the tiledlayer.
+Returns:
+A pointer to the image. NULL if there is no image specified.</source>
+
+Simple enough to use, just make sure you have something set up to handle if this function returns null otherwise your program will not be very happy. On we go to the next functions! GetCellHeight() and GetCellWidth() .
+
+<source lang="cpp">u32 wsp::TiledLayer::GetCellWidth ( ) const
+Gets the cell width.
+Returns:
+The width of a single cell.</source>
+
+And
+
+<source lang="cpp">u32 wsp::TiledLayer::GetCellHeight ( ) const
+Gets the cell height.
+Returns:
+The height of a single cell.</source>
+
+This will return a type u32 with the width or height in pixels (obviously you can’t have half a pixel), this can be useful if you want to manipulate the size of each cell by its current size +/- a value.
+
+Next functions we will look at regard the alpha value of the Image object passed to, this works just the same as SetTransparency() for a Sprites image:
+
+<source lang="cpp">void wsp::TiledLayer::SetTransparency ( u8 alpha )
+Sets the transparency of the tiledlayer.
+Parameters:
+ alpha Sets the transparency. Has a range from 0x00 (invisible) to 0xFF (fully visible)</source>
+
+And to get...
+
+<source lang="cpp">u8 wsp::TiledLayer::GetTransparency ( ) const
+Gets the transparency of the tiledlayer.
+Returns:
+The current transparency of the tiledlayer. Has a range from 0x00 (invisible) to 0xFF (fully visible)</source>
+
+I won’t bother telling you what these do, the examples enough and there’s a more detailed description on getting and setting alpha values in chapter 4.
+
+Moving along quickly, we will now look at the last function regarding the TiledLayer class, Draw()
+
+<source lang="cpp">void Draw (f32 offsetX=0, f32 offsetY=0) const
+Draws the tiledlayer to the current viewport.</source>
+
+A very handy function for easily drawing your tiles, ignore the parameters for now, just leave them as 0, this will draw a TiledLayer object to the viewport, so you can see it basically. Call like this:
+
+<source lang="cpp">ourTileObject.Draw(0,0);</source>
+
+Simple! And that brings us to the end of the Tiled Layer section of this guide. Note: some of this was taken from http://java.sun.com/ I thank the people at Sun for allowing the use of their material in this section. Until next time,
== EXAMPLE PROGRAMS ==
== EXAMPLE PROGRAMS ==