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.

May 8 2013
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:
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:
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.
Related Post
By admin • Kako napraviti Android aplikaciju • • Tags: android SDK, razvoj aplikacija