Cách Tạo Ra 1 Trò Chơi Trên Máy Tính: 11 Bước (Kèm Ảnh), Hướng Dẫn Lập Trình Game Cho Người Chưa Biết Gì! Update 09/2021

Mục tiêu của tài liệu hướng dẫn bạn làm quen với một vài kỹ thuật đơn giản trong lập trình Game 2D Android. Bao gồm:
Sử dụng SuffaceViewVẽ trên CanvasChuyển động của các nhân vật game.Tương tác với cử chỉ của người chơi
Trong tài liệu này tôi sẽ hướng dẫn bạn lập trình từng bước, chính vì vậy bạn cần đọc và thực hành từ trên xuống dưới. Chúng ta sẽ viết từng phiên bản của trò chơi từ 1 cho tới phiên bản cuối cùng (Release).

Đang xem: Cách tạo ra 1 trò chơi

*

*

*

*

*

Chú ý rằng bạn đang tạo một trò chơi 2D trên Android, chính vì vậy giao diện của trò chơi phải do bạn vẽ ra, chính vì vậy bạn không cần một file như là activity_main.xml.
Copy các ảnh này vào thư mục drawable của project. Tạo mới thư mục raw, và copy file explosion.wav & background.mp3 vào thư mục này.
Với trò chơi bạn cần phải sét đặt ảnh nền và một điều quan trọng bạn cần phải sét chế độ FullScreen (Đầy màn hình).

package org.o7planning.android2dgame; import android.app.Activity;import android.os.Bundle;import android.view.Window;import android.view.WindowManager;public class MainActivity extends Activity {
Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set fullscreen this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); // Set No Title this.requestWindowFeature(Window.FEATURE_NO_TITLE); }}
Tiếp theo sét đặt kiểu màn hình nằm ngang (Landscape). Bạn cần phải sét đặt trong AndroidManifest.xml.
Tiếp theo bạn cần viết code để hiển thị nhân vật trò chơi trên màn hình và di chuyển nó từ trái qua phải theo một vận tốc nào đó.
Với một nhân vật trong trò chơi bạn chỉ có một file ảnh, nhưng file ảnh được chia ra làm nhiều vùng mô tả các hành động khác nhau của nhân vật.

Xem thêm: cách chơi xẻng cf

Sử dụng code bạn có thể vẽ một vùng ảnh lên đối tượng Canvas của trò chơi, tại tạo độ x, y. Sử dụng vòng lặp for để liên tục vẽ lại trên Canvas bạn có thể tạo ra sự chuyển động của nhân vật.
Trong khi lập trình Game bạn cũng cần phải tính đến hướng di chuyển của nhân vật trong trò chơi, vận tốc của nhân vật.
package org.o7planning.android2dgame;import android.graphics.Bitmap;public abstract class GameObject { protected Bitmap image; protected final int rowCount; protected final int colCount; protected final int WIDTH; protected final int HEIGHT; protected final int width; protected final int height; protected int x; protected int y; public GameObject(Bitmap image, int rowCount, int colCount, int x, int y) { this.image = image; this.rowCount= rowCount; this.colCount= colCount; this.x= x; this.y= y; this.WIDTH = image.getWidth(); this.HEIGHT = image.getHeight(); this.width = this.WIDTH/ colCount; this.height= this.HEIGHT/ rowCount; } protected Bitmap createSubImageAt(int row, int col) { // createBitmap(bitmap, x, y, width, height). Bitmap subImage = Bitmap.createBitmap(image, col* width, row* height ,width,height); return subImage; } public int getX() { return this.x; } public int getY() { return this.y; } public int getHeight() { return height; } public int getWidth() { return width; }}
package org.o7planning.android2dgame;import android.graphics.Bitmap;import android.graphics.Canvas;public class ChibiCharacter extends GameObject { private static final int ROW_TOP_TO_BOTTOM = 0; private static final int ROW_RIGHT_TO_LEFT = 1; private static final int ROW_LEFT_TO_RIGHT = 2; private static final int ROW_BOTTOM_TO_TOP = 3; // Row index of Image are being used. private int rowUsing = ROW_LEFT_TO_RIGHT; private int colUsing; private Bitmap leftToRights; private Bitmap rightToLefts; private Bitmap topToBottoms; private Bitmap bottomToTops; // Velocity of game character (pixel/millisecond) public static final float VELOCITY = 0.1f; private int movingVectorX = 10; private int movingVectorY = 5; private long lastDrawNanoTime =-1; private GameSurface gameSurface; public ChibiCharacter(GameSurface gameSurface, Bitmap image, int x, int y) { super(image, 4, 3, x, y); this.gameSurface= gameSurface; this.topToBottoms = new Bitmap; // 3 this.rightToLefts = new Bitmap; // 3 this.leftToRights = new Bitmap; // 3 this.bottomToTops = new Bitmap; // 3 for(int col = 0; col= this.colCount) { this.colUsing =0; } // Current time in nanoseconds long now = System.nanoTime(); // Never once did draw. if(lastDrawNanoTime==-1) { lastDrawNanoTime= now; } // Change nanoseconds to milliseconds (1 nanosecond = 1000000 milliseconds). int deltaTime = (int) ((now – lastDrawNanoTime)/ 1000000 ); // Distance moves float distance = VELOCITY * deltaTime; double movingVectorLength = Math.sqrt(movingVectorX* movingVectorX + movingVectorY*movingVectorY); // Calculate the new position of the game character. this.x = x + (int)(distance* movingVectorX / movingVectorLength); this.y = y + (int)(distance* movingVectorY / movingVectorLength); // When the game”s character touches the edge of the screen, then change direction if(this.x this.gameSurface.getWidth() -width) { this.x= this.gameSurface.getWidth()-width; this.movingVectorX = – this.movingVectorX; } if(this.y this.gameSurface.getHeight()- height) { this.y= this.gameSurface.getHeight()- height; this.movingVectorY = – this.movingVectorY ; } // rowUsing if( movingVectorX > 0 ) { if(movingVectorY > 0 && Math.abs(movingVectorX) 0 && Math.abs(movingVectorX)
package org.o7planning.android2dgame;import android.graphics.Canvas;import android.view.SurfaceHolder;public class GameThread extends Thread { private boolean running; private GameSurface gameSurface; private SurfaceHolder surfaceHolder; public GameThread(GameSurface gameSurface, SurfaceHolder surfaceHolder) { this.gameSurface= gameSurface; this.surfaceHolder= surfaceHolder; }
Override public void run() { long startTime = System.nanoTime(); while(running) { Canvas canvas= null; try { // Get Canvas from Holder and lock it. canvas = this.surfaceHolder.lockCanvas(); // Synchronized synchronized (canvas) { this.gameSurface.update(); this.gameSurface.draw(canvas); } }catch(Exception e) { // Do nothing. } finally { if(canvas!= null) { // Unlock Canvas. this.surfaceHolder.unlockCanvasAndPost(canvas); } } long now = System.nanoTime() ; // Interval to redraw game // (Change nanoseconds to milliseconds) long waitTime = (now – startTime)/1000000; if(waitTime
Lớp GameSurface mô phỏng toàn bộ bề mặt của trò chơi, class này mở rộng từ SurfaceView, SurfaceView chứa một đối tượng Canvas, các đối tượng trong trò chơi sẽ được vẽ lên Canvas.
package org.o7planning.android2dgame;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.view.SurfaceHolder;import android.view.SurfaceView;public class GameSurface extends SurfaceView implements SurfaceHolder.Callback { private GameThread gameThread; private ChibiCharacter chibi1; public GameSurface(Context context) { super(context); // Make Game Surface focusable so it can handle events. . this.setFocusable(true); // Sét callback. this.getHolder().addCallback(this); } public void update() { this.chibi1.update(); }
Override public void draw(Canvas canvas) { super.draw(canvas); this.chibi1.draw(canvas); } // Implements method of SurfaceHolder.Callback
Override public void surfaceCreated(SurfaceHolder holder) { Bitmap chibiBitmap1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi1); this.chibi1 = new ChibiCharacter(this,chibiBitmap1,100,50); this.gameThread = new GameThread(this,holder); this.gameThread.setRunning(true); this.gameThread.start(); } // Implements method of SurfaceHolder.Callback
Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } // Implements method of SurfaceHolder.Callback
Override public void surfaceDestroyed(SurfaceHolder holder) { boolean retry= true; while(retry) { try { this.gameThread.setRunning(false); // Parent thread must wait until the end of GameThread. this.gameThread.join(); }catch(InterruptedException e) { e.printStackTrace(); } retry= true; } }}
package org.o7planning.android2dgame;import android.app.Activity;import android.os.Bundle;import android.view.Window;import android.view.WindowManager;public class MainActivity extends Activity {
Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set fullscreen this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); // Set No Title this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.setContentView(new GameSurface(this)); }}
Tiếp theo bạn có xử lý sự kiện khi người dùng chạm vào màn hình, nhân vật trò chơi sẽ chạy theo hướng bạn đã chạm. Bạn cần xử lý sự kiện này trên lớp GameSurface.
Overridepublic boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { int x= (int)event.getX(); int y = (int)event.getY(); int movingVectorX =x- this.chibi1.getX() ; int movingVectorY =y- this.chibi1.getY() ; this.chibi1.setMovingVector(movingVectorX,movingVectorY); return true; } return false;}
package org.o7planning.android2dgame;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.view.MotionEvent;import android.view.SurfaceHolder;import android.view.SurfaceView;public class GameSurface extends SurfaceView implements SurfaceHolder.Callback { private GameThread gameThread; private ChibiCharacter chibi1; public GameSurface(Context context) { super(context); // Make Game Surface focusable so it can handle events. this.setFocusable(true); // Set callback. this.getHolder().addCallback(this); } public void update() { this.chibi1.update(); }
Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { int x= (int)event.getX(); int y = (int)event.getY(); int movingVectorX =x- this.chibi1.getX() ; int movingVectorY =y- this.chibi1.getY() ; this.chibi1.setMovingVector(movingVectorX,movingVectorY); return true; } return false; }
Override public void draw(Canvas canvas) { super.draw(canvas); this.chibi1.draw(canvas); } // Implements method of SurfaceHolder.Callback
Override public void surfaceCreated(SurfaceHolder holder) { Bitmap chibiBitmap1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi1); this.chibi1 = new ChibiCharacter(this,chibiBitmap1,100,50); this.gameThread = new GameThread(this,holder); this.gameThread.setRunning(true); this.gameThread.start(); } // Implements method of SurfaceHolder.Callback
Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } // Implements method of SurfaceHolder.Callback
Override public void surfaceDestroyed(SurfaceHolder holder) { boolean retry= true; while(retry) { try { this.gameThread.setRunning(false); // Parent thread must wait until the end of GameThread. this.gameThread.join(); }catch(InterruptedException e) { e.printStackTrace(); } retry= true; } }}
Bạn có thể tạo thêm các nhân vật khác vào trò chơi, ở đây tôi thêm một nhân vật thứ 2. Sửa lại code của lớp GameSurface:
package org.o7planning.android2dgame;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.view.MotionEvent;import android.view.SurfaceHolder;import android.view.SurfaceView;import java.util.ArrayList;import java.util.List;public class GameSurface extends SurfaceView implements SurfaceHolder.Callback { private GameThread gameThread; private final List chibiList = new ArrayList(); public GameSurface(Context context) { super(context); // Make Game Surface focusable so it can handle events. this.setFocusable(true); // Set callback. this.getHolder().addCallback(this); } public void update() { for(ChibiCharacter chibi: chibiList) { chibi.update(); } }
Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { int x= (int)event.getX(); int y = (int)event.getY(); for(ChibiCharacter chibi: chibiList) { int movingVectorX =x- chibi.getX() ; int movingVectorY =y- chibi.getY() ; chibi.setMovingVector(movingVectorX, movingVectorY); } return true; } return false; }
Override public void draw(Canvas canvas) { super.draw(canvas); for(ChibiCharacter chibi: chibiList) { chibi.draw(canvas); } } // Implements method of SurfaceHolder.Callback
Override public void surfaceCreated(SurfaceHolder holder) { Bitmap chibiBitmap1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi1); ChibiCharacter chibi1 = new ChibiCharacter(this,chibiBitmap1,100,50); Bitmap chibiBitmap2 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi2); ChibiCharacter chibi2 = new ChibiCharacter(this,chibiBitmap2,300,150); this.chibiList.add(chibi1); this.chibiList.add(chibi2); this.gameThread = new GameThread(this,holder); this.gameThread.setRunning(true); this.gameThread.start(); } // Implements method of SurfaceHolder.Callback
Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } // Implements method of SurfaceHolder.Callback
Override public void surfaceDestroyed(SurfaceHolder holder) { boolean retry= true; while(retry) { try { this.gameThread.setRunning(false); // Parent thread must wait until the end of GameThread. this.gameThread.join(); }catch(InterruptedException e) { e.printStackTrace(); } retry= true; } }}
Đôi khi bạn cần phải xử lý một vài hiệu ứng cho trò chơi, chẳng hạn bạn đang điều khiển một cái máy bay, khi nó rơi xuống đất máy bay phát nổ, vậy nổ là một hiệu ứng. Trong phần này tôi sẽ mô phỏng khi bạn chạm (click) vào nhân vật Chibi, nó sẽ phát nổ.
Lớp Explosion mô phỏng một vụ nổ, khi bạn click vào nhân vật Chibi, nó bị loại ra khỏi trò chơi và một đối tượng Explosion được thêm vào trò chơi tại vị trí của nhân vật Chibi vừa bị loại bỏ.

Xem thêm: Cách Chơi Tướng Garen Mùa 11: Bảng Ngọc, Cách Lên Đồ Garen, Cách Chơi Garen Mùa 11

package org.o7planning.android2dgame; import android.graphics.Bitmap;import android.graphics.Canvas;public class Explosion extends GameObject { private int rowIndex = 0 ; private int colIndex = -1 ; private boolean finish= false; private GameSurface gameSurface; public Explosion(GameSurface GameSurface, Bitmap image, int x, int y) { super(image, 5, 5, x, y); this.gameSurface= GameSurface; } public void update() { this.colIndex++; if(this.colIndex >= this.colCount) { this.colIndex =0; this.rowIndex++; if(this.rowIndex>= this.rowCount) { this.finish= true; } } } public void draw(Canvas canvas) { if(!finish) { Bitmap bitmap= this.createSubImageAt(rowIndex,colIndex); canvas.drawBitmap(bitmap, this.x, this.y,null); } } public boolean isFinish() { return finish; }}
package org.o7planning.android2dgame;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.view.MotionEvent;import android.view.SurfaceHolder;import android.view.SurfaceView;import java.util.ArrayList;import java.util.Iterator;import java.util.List;public class GameSurface extends SurfaceView implements SurfaceHolder.Callback { private GameThread gameThread; private final List chibiList = new ArrayList(); private final List explosionList = new ArrayList(); public GameSurface(Context context) { super(context); // Make Game Surface focusable so it can handle events. this.setFocusable(true); // Sét callback. this.getHolder().addCallback(this); }
Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { int x= (int)event.getX(); int y = (int)event.getY(); Iterator iterator= this.chibiList.iterator(); while(iterator.hasNext()) { ChibiCharacter chibi = iterator.next(); if( chibi.getX() iterator= this.explosionList.iterator(); while(iterator.hasNext()) { Explosion explosion = iterator.next(); if(explosion.isFinish()) { // If explosion finish, Remove the current element from the iterator & list. iterator.remove(); continue; } } }
Override public void draw(Canvas canvas) { super.draw(canvas); for(ChibiCharacter chibi: chibiList) { chibi.draw(canvas); } for(Explosion explosion: this.explosionList) { explosion.draw(canvas); } } // Implements method of SurfaceHolder.Callback
Override public void surfaceCreated(SurfaceHolder holder) { Bitmap chibiBitmap1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi1); ChibiCharacter chibi1 = new ChibiCharacter(this,chibiBitmap1,100,50); Bitmap chibiBitmap2 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi2); ChibiCharacter chibi2 = new ChibiCharacter(this,chibiBitmap2,300,150); this.chibiList.add(chibi1); this.chibiList.add(chibi2); this.gameThread = new GameThread(this,holder); this.gameThread.setRunning(true); this.gameThread.start(); } // Implements method of SurfaceHolder.Callback
Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } // Implements method of SurfaceHolder.Callback
Override public void surfaceDestroyed(SurfaceHolder holder) { boolean retry= true; while(retry) { try { this.gameThread.setRunning(false); // Parent thread must wait until the end of GameThread. this.gameThread.join(); }catch(InterruptedException e) { e.printStackTrace(); } retry= true; } }}
Tiếp theo bạn cần thêm hiệu ứng âm thanh vào trò chơi, chẳng hạn âm thanh nền của trò chơi, âm thanh tiếng nổ khi nhân vật Chibi bị phá hủy.
package org.o7planning.android2dgame;import android.graphics.Bitmap;import android.graphics.Canvas;public class Explosion extends GameObject { private int rowIndex = 0 ; private int colIndex = -1 ; private boolean finish= false; private GameSurface gameSurface; public Explosion(GameSurface GameSurface, Bitmap image, int x, int y) { super(image, 5, 5, x, y); this.gameSurface= GameSurface; } public void update() { this.colIndex++; // Play sound explosion.wav. if(this.colIndex==0 && this.rowIndex==0) { this.gameSurface.playSoundExplosion(); } if(this.colIndex >= this.colCount) { this.colIndex =0; this.rowIndex++; if(this.rowIndex>= this.rowCount) { this.finish= true; } } } public void draw(Canvas canvas) { if(!finish) { Bitmap bitmap= this.createSubImageAt(rowIndex,colIndex); canvas.drawBitmap(bitmap, this.x, this.y,null); } } public boolean isFinish() { return finish; }}
package org.o7planning.android2dgame;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.media.AudioAttributes;import android.media.AudioManager;import android.media.SoundPool;import android.os.Build;import android.view.MotionEvent;import android.view.SurfaceHolder;import android.view.SurfaceView;import java.util.ArrayList;import java.util.Iterator;import java.util.List;public class GameSurface extends SurfaceView implements SurfaceHolder.Callback { private GameThread gameThread; private final List chibiList = new ArrayList(); private final List explosionList = new ArrayList(); private static final int MAX_STREAMS=100; private int soundIdExplosion; private int soundIdBackground; private boolean soundPoolLoaded; private SoundPool soundPool; public GameSurface(Context context) { super(context); // Make Game Surface focusable so it can handle events. this.setFocusable(true); // Sét callback. this.getHolder().addCallback(this); this.initSoundPool(); } private void initSoundPool() { // With Android API >= 21. if (Build.VERSION.SDK_INT >= 21 ) { AudioAttributes audioAttrib = new AudioAttributes.Builder() .setUsage(AudioAttributes.USAGE_GAME) .setContentType(AudioAttributes.CONTENT_TYPE_SONIFICATION) .build(); SoundPool.Builder builder= new SoundPool.Builder(); builder.setAudioAttributes(audioAttrib).setMaxStreams(MAX_STREAMS); this.soundPool = builder.build(); } // With Android API iterator= this.chibiList.iterator(); while(iterator.hasNext()) { ChibiCharacter chibi = iterator.next(); if( chibi.getX() iterator= this.explosionList.iterator(); while(iterator.hasNext()) { Explosion explosion = iterator.next(); if(explosion.isFinish()) { // If explosion finish, Remove the current element from the iterator & list. iterator.remove(); continue; } } }
Override public void draw(Canvas canvas) { super.draw(canvas); for(ChibiCharacter chibi: chibiList) { chibi.draw(canvas); } for(Explosion explosion: this.explosionList) { explosion.draw(canvas); } } // Implements method of SurfaceHolder.Callback
Override public void surfaceCreated(SurfaceHolder holder) { Bitmap chibiBitmap1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi1); ChibiCharacter chibi1 = new ChibiCharacter(this,chibiBitmap1,100,50); Bitmap chibiBitmap2 = BitmapFactory.decodeResource(this.getResources(),R.drawable.chibi2); ChibiCharacter chibi2 = new ChibiCharacter(this,chibiBitmap2,300,150); this.chibiList.add(chibi1); this.chibiList.add(chibi2); this.gameThread = new GameThread(this,holder); this.gameThread.setRunning(true); this.gameThread.start(); } // Implements method of SurfaceHolder.Callback
Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } // Implements method of SurfaceHolder.Callback
Override public void surfaceDestroyed(SurfaceHolder holder) { boolean retry= true; while(retry) { try { this.gameThread.setRunning(false); // Parent thread must wait until the end of GameThread. this.gameThread.join(); }catch(InterruptedException e) { e.printStackTrace(); } retry= true; } }}