Android Jeu utilisant Canvas et SurfaceView


Exemple

Cela couvre comment vous pouvez créer un jeu 2D de base en utilisant SurfaceView.


Tout d'abord, nous avons besoin d'une activité:

public class GameLauncher extends AppCompatActivity {

    private Game game;
    @Override
    public void onCreate(Bundle sis){
        super.onCreate(sis);
        game = new Game(GameLauncher.this);//Initialize the game instance
        setContentView(game);//setContentView to the game surfaceview
        //Custom XML files can also be used, and then retrieve the game instance using findViewById.
    }

}

L'activité doit également être déclarée dans le manifeste Android.


Maintenant pour le jeu lui-même. Tout d'abord, nous commençons par implémenter un thread de jeu:

public class Game extends SurfaceView implements SurfaceHolder.Callback, Runnable{

    /**
     * Holds the surface frame
     */
    private SurfaceHolder holder;

    /**
     * Draw thread
     */
    private Thread drawThread;

    /**
     * True when the surface is ready to draw
     */
    private boolean surfaceReady = false;


    /**
     * Drawing thread flag
     */

    private boolean drawingActive = false;

    /**
     * Time per frame for 60 FPS
     */
    private static final int MAX_FRAME_TIME = (int) (1000.0 / 60.0);

    private static final String LOGTAG = "surface";    

    /*
     * All the constructors are overridden to ensure functionality if one of the different constructors are used through an XML file or programmatically
     */
    public Game(Context context) {
        super(context);
        init();
    }
    public Game(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public Game(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    @TargetApi(21)
    public Game(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    public void init(Context c) {
        this.c = c;
        
        SurfaceHolder holder = getHolder();
        holder.addCallback(this);
        setFocusable(true);
        //Initialize other stuff here later
    }

    public void render(Canvas c){
        //Game rendering here
    }

    public void tick(){
        //Game logic here
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height)
    {
        if (width == 0 || height == 0){
            return;
        }

        // resize your UI
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder){
        this.holder = holder;

        if (drawThread != null){
            Log.d(LOGTAG, "draw thread still active..");
            drawingActive = false;
            try{
                drawThread.join();
            } catch (InterruptedException e){}
        }

        surfaceReady = true;
        startDrawThread();
        Log.d(LOGTAG, "Created");
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder){
        // Surface is not used anymore - stop the drawing thread
        stopDrawThread();
        // and release the surface
        holder.getSurface().release();

        this.holder = null;
        surfaceReady = false;
        Log.d(LOGTAG, "Destroyed");
    }

    @Override
    public boolean onTouchEvent(MotionEvent event){
        // Handle touch events
        return true;
    }

    /**
     * Stops the drawing thread
     */
    public void stopDrawThread(){
        if (drawThread == null){
            Log.d(LOGTAG, "DrawThread is null");
            return;
        }
        drawingActive = false;
        while (true){
            try{
                Log.d(LOGTAG, "Request last frame");
                drawThread.join(5000);
                break;
            } catch (Exception e) {
                Log.e(LOGTAG, "Could not join with draw thread");
            }
        }
        drawThread = null;
    }

    /**
     * Creates a new draw thread and starts it.
     */
    public void startDrawThread(){
        if (surfaceReady && drawThread == null){
            drawThread = new Thread(this, "Draw thread");
            drawingActive = true;
            drawThread.start();
        }
    }

    @Override
    public void run() {
        Log.d(LOGTAG, "Draw thread started");
        long frameStartTime;
        long frameTime;

        /*
         * In order to work reliable on Nexus 7, we place ~500ms delay at the start of drawing thread
         * (AOSP - Issue 58385)
         */
        if (android.os.Build.BRAND.equalsIgnoreCase("google") && android.os.Build.MANUFACTURER.equalsIgnoreCase("asus") && android.os.Build.MODEL.equalsIgnoreCase("Nexus 7")) {
            Log.w(LOGTAG, "Sleep 500ms (Device: Asus Nexus 7)");
            try {
                Thread.sleep(500);
            } catch (InterruptedException ignored) {}
        }

        while (drawing) {
            if (sf == null) {
                return;
            }

            frameStartTime = System.nanoTime();
            Canvas canvas = sf.lockCanvas();
            if (canvas != null) {
                try {
                    synchronized (sf) {
                        tick();
                        render(canvas);
                    }
                } finally {

                    sf.unlockCanvasAndPost(canvas);
                }
            }

            // calculate the time required to draw the frame in ms
            frameTime = (System.nanoTime() - frameStartTime) / 1000000;

            if (frameTime < MAX_FRAME_TIME){
                try {
                    Thread.sleep(MAX_FRAME_TIME - frameTime);
                } catch (InterruptedException e) {
                    // ignore
                }
            }

        }
        Log.d(LOGTAG, "Draw thread finished");
    }
}

C'est la partie de base. Vous avez maintenant la possibilité de dessiner sur l'écran.

Maintenant, commençons par ajouter aux entiers:

public final int x = 100;//The reason for this being static will be shown when the game is runnable
public int y;
public int velY;

Pour cette prochaine partie, vous allez avoir besoin d'une image. Il devrait être d'environ 100x100 mais il peut être plus grand ou plus petit. Pour apprendre, un Rect peut également être utilisé (mais cela nécessite un changement de code un peu plus bas)

Maintenant, nous déclarons un bitmap:

private Bitmap PLAYER_BMP = BitmapFactory.decodeResource(getResources(), R.drawable.my_player_drawable);

Dans le rendu, nous devons dessiner ce bitmap.

...
c.drawBitmap(PLAYER_BMP, x, y, null);
...

AVANT DE LANCER, il reste encore des choses à faire

Nous avons d'abord besoin d'un booléen:

boolean up = false;

dans onTouchEvent, nous ajoutons:

if(ev.getAction() == MotionEvent.ACTION_DOWN){
    up = true;
}else if(ev.getAction() == MotionEvent.ACTION_UP){
    up = false;
}

Et en cochant cette case, vous devez déplacer le joueur:

if(up){
    velY -=1;
}
else{
    velY +=1;
}
if(velY >14)velY = 14;
if(velY <-14)velY = -14;
y += velY *2;

et maintenant nous en avons besoin dans init:

WindowManager wm = (WindowManager) c.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
WIDTH = size.x;
HEIGHT = size.y;
y = HEIGHT/ 2 - PLAYER_BMP.getHeight();

Et nous avons besoin de ces variables:

public static int WIDTH, HEIGHT;

À ce stade, le jeu est exécutable. Cela signifie que vous pouvez le lancer et le tester.


Vous devez maintenant avoir une image de joueur ou un recto en haut et en bas de l'écran. Le lecteur peut être créé en tant que classe personnalisée si nécessaire. Ensuite, toutes les choses liées au lecteur peuvent être déplacées dans cette classe et utiliser une instance de cette classe pour déplacer, rendre et exécuter une autre logique.

Maintenant, comme vous l'avez probablement vu sous test, il quitte l'écran. Nous devons donc le limiter.

Tout d'abord, nous devons déclarer le Rect:

private Rect screen;

Dans init, après l'initialisation de la largeur et de la hauteur, nous créons un nouveau rect qui est l'écran.

screen = new Rect(0,0,WIDTH,HEIGHT);

Maintenant, nous avons besoin d'un autre rect sous la forme d'une méthode:

private Rect getPlayerBound(){
    return new Rect(x, y, x + PLAYER_BMP.getWidth(), y + PLAYER_BMP.getHeight();
}

et en tick:

if(!getPlayerBound().intersects(screen){
    gameOver = true;
}

L'implémentation de gameOVer peut également être utilisée pour afficher le début d'un jeu.


Autres aspects d'un jeu à noter:

Enregistrement (actuellement manquant dans la documentation)