Kako napraviti Android aplikaciju: Tutorijal 2.1 – SurfaceView, sprites i animacija

U ovom tutorijalu ćemo se baviti SurfaceView-om, sprite-ovima i animacijom. Zašto je bitno? U prethodnim tutorijalima smo se bavili korisničkim interfejsom i grafikom što će usporiti samu aplikaciju, pa je zbog toga bitno da se ona rastereti. S toga, za početak je potrebno da kreirate novu klasu koju ćete nazvati SurfaceViewExmple i naravno, podesiti novu aktivnost u AndroidManifest-u, kao i dugme 6 (Button6).

Kod koji treba uneti u AndroidManifest je:

 <activity

android:name=".SurfaceViewExample"

android:label="@string/app_name" >

<intent-filter>

<action android:name="com.androidmarket.prvaaplikacija.SURFACEVIEWEXAMPLE" />

<category android:name="android.intent.category.DEFAULT" />

</intent-filter>

</activity>

Kod koji treba uneti u novu klasu SurfaceViewExample je:

 package com.androidmarket.prvaaplikacija;

import com.androidmarket.prvaaplikacija.R.drawable;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.View;

import android.view.View.OnTouchListener;

public class SurfaceViewExample extends Activity implements OnTouchListener{

OurView v;

Bitmap tball;

float x, y;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

v = new OurView(this);

v.setOnTouchListener(this);

tball = BitmapFactory.decodeResource(getResources(), R.drawable.tenis);

x = y = 0;

setContentView(v);

}

@Override

protected void onPause() {

// TODO Auto-generated method stub

super.onPause();

v.pause();

}

@Override

protected void onResume() {

// TODO Auto-generated method stub

super.onResume();

v.resume();

}

public class OurView extends SurfaceView implements Runnable{

Thread t = null;

SurfaceHolder holder;

boolean isItOk = false;

public OurView(Context context) {

super(context);

// TODO Auto-generated constructor stub

holder = getHolder();

}

@Override

public void run() {

// TODO Auto-generated method stub

while (isItOk == true){

// perform canvas drawing

if (!holder.getSurface().isValid()){

continue;

}

Canvas c = holder.lockCanvas();

c.drawARGB(255, 150, 150, 10);

c.drawBitmap(tball, x - (tball.getWidth()/2), y - (tball.getHeight()/2), null);

holder.unlockCanvasAndPost(c);

}

}

public void pause(){

isItOk = false;

while(true){

try{

t.join();

}catch (InterruptedException e){

e.printStackTrace();

}

break;

}

t = null;

}

public void resume(){

isItOk = true;

t = new Thread(this);

t.start();

}

}

@Override

public boolean onTouch(View v, MotionEvent me) {

// TODO Auto-generated method stub

try {

Thread.sleep(50);

} catch (InterruptedException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

switch(me.getAction()){

case MotionEvent.ACTION_DOWN:

x = me.getX();

y = me.getY();

break;

case MotionEvent.ACTION_UP:

x = me.getX();

y = me.getY();

break;

case MotionEvent.ACTION_MOVE:

x = me.getX();

y = me.getY();

break;

}

return false;

}

}

>

Kada ste uneli ovaj kod možete testirati vašu aplikaciju i uveriti se da li radi. Ako ste sve uradili kako treba, ona treba izgledati ovako:

Sada kreirajte novu klasu i nazovite je Sprite, a u drawable foldere kopirajte sledeću sliku i nazovite je spritesheet: http://fc09.deviantart.net/fs70/i/2011/169/0/8/blue_player_sprite_sheet_by_resetado-d3j7zba.png

Zatim unesite kod u klasu Sprite:

 package com.androidmarket.prvaaplikacija;

import com.androidmarket.prvaaplikacija.SurfaceViewExample.OurView;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Rect;

public class Sprite {

int x, y;

int xSpeed, ySpeed;

int height, width;

Bitmap f;

OurView ov;

int currentFrame = 0;

int direction = 0;

public Sprite(OurView ourView, Bitmap fudbal) {

// TODO Auto-generated constructor stub

f = fudbal;

ov = ourView;

height = f.getHeight() / 6;

width = f.getWidth() / 6;

x = y = 0;

xSpeed = 5;

ySpeed = 0;

}

private void update() {

// TODO Auto-generated method stub

//0 = up

//1 = down

//2 = left

//3 = right

//facing down

if (x > ov.getWidth() - width - xSpeed){

xSpeed = 0;

ySpeed = 5;

direction = 1;

}

//going left

if (y > ov.getHeight() - height - ySpeed){

xSpeed = -5;

ySpeed = 0;

direction = 2;

}

//facing up

if (x + xSpeed < 0){

x = 0;

xSpeed = 0;

ySpeed = -5;

direction = 0;

}

//going right

if (y + ySpeed < 0){

y = 0;

xSpeed = 5;

ySpeed = 0;

direction = 3;

}

try {

Thread.sleep(50);

} catch (InterruptedException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

currentFrame = ++currentFrame % 6;

x += xSpeed;

y += ySpeed;

}

public void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

update();

int srcX = currentFrame * width;

int srcY = direction * height;

Rect src = new Rect(srcX, srcY, srcX + width, srcY + height);

Rect dst = new Rect(x, y, x+width, y+height);

canvas.drawBitmap(f, src, dst, null);

}

}

Nakon toga postojeći kod u klasi SurfaceViewExmple, zamenite kodom:

 package com.androidmarket.prvaaplikacija;

import com.androidmarket.prvaaplikacija.R.drawable;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.View;

import android.view.View.OnTouchListener;

public class SurfaceViewExample extends Activity implements OnTouchListener{

OurView v;

Bitmap tball, fudbal;

float x, y;

Sprite sprite;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

v = new OurView(this);

v.setOnTouchListener(this);

tball = BitmapFactory.decodeResource(getResources(), R.drawable.tenis);

fudbal = BitmapFactory.decodeResource(getResources(), R.drawable.spritesheat);

x = y = 0;

setContentView(v);

}

@Override

protected void onPause() {

// TODO Auto-generated method stub

super.onPause();

v.pause();

}

@Override

protected void onResume() {

// TODO Auto-generated method stub

super.onResume();

v.resume();

}

public class OurView extends SurfaceView implements Runnable{

Thread t = null;

SurfaceHolder holder;

boolean isItOk = false;

Sprite sprite;

boolean spriteLoaded = false;

public OurView(Context context) {

super(context);

// TODO Auto-generated constructor stub

holder = getHolder();

}

@SuppressLint("WrongCall") @Override

public void run() {

// TODO Auto-generated method stub

sprite = new Sprite (this, fudbal);

while (isItOk == true){

// perform canvas drawing

if (!holder.getSurface().isValid()){

continue;

}

if(!spriteLoaded){

spriteLoaded = true;

}

Canvas c = holder.lockCanvas();

onDraw(c);

holder.unlockCanvasAndPost(c);

}

}

@SuppressLint("WrongCall") protected void onDraw(Canvas canvas){

canvas.drawARGB(255, 150, 150, 10);

canvas.drawBitmap(tball, x - (tball.getWidth()/2), y - (tball.getHeight()/2), null);

sprite.onDraw(canvas);

}

public void pause(){

isItOk = false;

while(true){

try{

t.join();

}catch (InterruptedException e){

e.printStackTrace();

}

break;

}

t = null;

}

public void resume(){

isItOk = true;

t = new Thread(this);

t.start();

}

}

@Override

public boolean onTouch(View v, MotionEvent me) {

// TODO Auto-generated method stub

try {

Thread.sleep(50);

} catch (InterruptedException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

switch(me.getAction()){

case MotionEvent.ACTION_DOWN:

x = me.getX();

y = me.getY();

break;

case MotionEvent.ACTION_UP:

x = me.getX();

y = me.getY();

break;

case MotionEvent.ACTION_MOVE:

x = me.getX();

y = me.getY();

break;

}

return false;

}

}

Sada testirajte vašu aplikaciju. Spritesheet koji smo izabrali za ovo možda baš i nije najprikladniji, pa s toga ako želite možete koristiti i neki drugi, samo obratite pažnju na broj kolona i redova, jer u tom slučaju treba uneti odogovarajuće izmene i u kod.