[Tutorial 7] libGDX –the render component

Draw something

So now lets do some visible stuff. Our rendering component is one of the most important component. In will show a component which can handle animation and static images, while animations will be the main work.

First of all you need to know, how does animation work in sprite based games. The animation technique we use, is called keyframe animation. It just shows one picture (keyframe) after another and interpolates between theese. In libgdx there is a class called Animation, which handles that for us. Because loading each picture one by one into memory is slow and its much faster to load one bigger image, we use a TextureAtlas. A TextureAtlas holds the big Texture containing sequences of keyframes, and makes them accessible by tags as TextureRegions. TextureRegions can be used directly to render into a SpriteBatch(the libGDX draw „container“). The RenderComponent should be able to render multiple Animations and playmodes (loop, reverse, ping-pong).

Our xml could look like this:

The entity has a renderComponent, which contains 3 animations elements. These „sprites“ can be animated or static. The default attribute of the renderComponent declares an default animation, which must be defined as a sprite element. Resources consist of a pngTexture and an atlas file, where the tags are defined. (name of spriteanimation = tag in the atlas file). The frame_time is used to control how fast the animation is played. 0.0 is used for static images like the „idle“ animation.

Creating a RenderComponent includes several steps. First of all the sprite elements and their resources need to be loaded. Every Animation has its Container class, which i called AnimationHolder and if i would do it again i would not make a extra class for this(A thing u could do better). Anyways here is the Code, its only used for Mapping.

In the initialize method of the renderComponent loading of the resources is done, by the libGDX AssetManager. And the default animation needs to be applied.

Now  lets take a look at the setAnimaion method. Today i really would suggest to rewrite this code, but i will post it to show the logic in there.

The first part should really be rewritten, it just searches for the matching animation and sets up the variables. If the animation is found the atlas, which was loaded before from the asset manager is acquired and the findRegions methods gives a list of frames. At least the animation is created and the currentTextureRegion which is the shown Frame is set.

After the initialize method the component is ready to use. To get the animation animating the update method is used.

And finally the draw method.

From the libGDX documentation.

Draws a rectangle with the bottom left corner at x,y and stretching the region to cover the given width and height. The
rectangle is offset by originX, originY relative to the origin. Scale specifies the scaling factor by which the rectangle
should be scaled around originX, originY. Rotation specifies the angle of counter clockwise rotation of the rectangle around
originX, originY.

Next time: PhysicComponent

Related Posts

Leave a reply