StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The way i do it is to use sprite sheets for example (Not my graphics!):</p> <p><img src="https://i.stack.imgur.com/19u8j.gif" alt="enter image description here"></p> <p>You can then use a class like this to handle your animation:</p> <pre><code>public class AnimSpriteClass { private Bitmap mAnimation; private int mXPos; private int mYPos; private Rect mSRectangle; private int mFPS; private int mNoOfFrames; private int mCurrentFrame; private long mFrameTimer; private int mSpriteHeight; private int mSpriteWidth; public AnimSpriteClass() { mSRectangle = new Rect(0,0,0,0); mFrameTimer =0; mCurrentFrame =0; mXPos = 80; mYPos = 200; } public void Initalise(Bitmap theBitmap, int Height, int Width, int theFPS, int theFrameCount) { mAnimation = theBitmap; mSpriteHeight = Height; mSpriteWidth = Width; mSRectangle.top = 0; mSRectangle.bottom = mSpriteHeight; mSRectangle.left = 0; mSRectangle.right = mSpriteWidth; mFPS = 1000 /theFPS; mNoOfFrames = theFrameCount; } public void Update(long GameTime) { if(GameTime > mFrameTimer + mFPS ) { mFrameTimer = GameTime; mCurrentFrame +=1; if(mCurrentFrame >= mNoOfFrames) { mCurrentFrame = 0; } } mSRectangle.left = mCurrentFrame * mSpriteWidth; mSRectangle.right = mSRectangle.left + mSpriteWidth; } public void draw(Canvas canvas) { Rect dest = new Rect(getXPos(), getYPos(), getXPos() + mSpriteWidth, getYPos() + mSpriteHeight); canvas.drawBitmap(mAnimation, mSRectangle, dest, null); } </code></pre> <ul> <li>mAnimation - This is will hold the actual bitmap containing the animation.</li> <li>mXPos/mYPos - These hold the X and Y screen coordinates for where we want the sprite to be on the screen. These refer to the top left hand corner of the image.</li> <li>mSRectangle - This is the source rectangle variable and controls which part of the image we are rendering for each frame.</li> <li>mFPS - This is the number of frames we wish to show per second. 15-20 FPS is enough to fool the human eye into thinking that a still image is moving. However on a mobile platform it’s unlikely you will have enough memory 3 – 10 FPS which is fine for most needs.</li> <li>mNoOfFrames -This is simply the number of frames in the sprite sheet we are animating.</li> <li>mCurrentFrame - We need to keep track of the current frame we are rendering so we can move to the next one in order.~</li> <li>mFrameTimer - This controls how long between frames.</li> <li>mSpriteHeight/mSpriteWidth -These contain the height and width of an Individual Frame not the entire bitmap and are used to calculate the size of the source rectangle.</li> </ul> <p>Now in order to use this class you have to add a few things to your graphics thread. First declare a new variable of your class and then it can be initialised in the constructor as below.</p> <pre><code>Animation = new OurAnimatedSpriteClass(); Animation.Initalise(Bitmap.decodeResource(res, R.drawable.stick_man), 62, 39, 20, 20); </code></pre> <p>In order to pass the value of the bitmap you first have to use the Bitmap Factory class to decode the resource. It decodes a bitmap from your resources folder and allows it to be passed as a variable. The rest of the values depend on your bitmap image.</p> <p>In order to be able to time the frames correctly you first need to add a Game timer to the game code. You do this by first adding a variable to store the time as show below.</p> <pre><code>private long mTimer; </code></pre> <p>We now need this timer to be updated with the correct time every frame so we need to add a line to the run function to do this.</p> <pre><code>public void run() { while (mRun) { Canvas c = null; mTimer = System.currentTimeMillis(); /////This line updates timer try { c = mSurfaceHolder.lockCanvas(null); synchronized (mSurfaceHolder) { Animation.update(mTimer); doDraw(c); }.... </code></pre> <p>then you just have to add <code>Animation.draw(canvas);</code> your Draw function and the animation will draw the current frame in the right place.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload