Cách Làm Game Trong Canvas - Lập Trình Di động

Có thể bạn quan tâm

Wednesday, October 4, 2017

Cách làm game trong Canvas

Bài này giải thích cách làm game trong canvas, thường bạn đọc sách làm theo một game nào đó xong thì tự suy ra, ở đây tôi viết mọi thứ cho rõ ràng, đơn giản. Có rất nhiều cách làm game, như dùng các game engine, công cụ chuyên nghiệp để làm. Nhưng mới học ta không cần chúng, chỉ dùng Canvas cũng có thể làm được nhiều thứ. Tạo một project bất kỳ, ta sẽ làm ở class Main. Tạo thư mục drawable, copy vài cái ảnh icon nhỏ vào đó.

Copy vào class Main một class nữa, cho vào trên ngoặc đóng cuối cùng. publicclass gameview extends View { public gameview(Context context) { super(context); } @Override protectedvoid onDraw(final Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); } }

Class gameview này có hàm onDraw là nơi vẽ nhân vật, điều khiển game. Bây giờ ta vẽ nhân vật đầu tiên. Copy dòng sau vào dưới dòng extends của class gameview. private Bitmap mcuoi; Copy dòng sau vào dướisuper(context); mcuoi = BitmapFactory.decodeResource(getResources(), R.drawable.cuoi); Copy dòng sau vào dướisuper.onDraw(canvas); canvas.drawBitmap(mcuoi, 50, 100, null); Đưa gameview vào class Main bằng cách khai báo đối tượng tên game lên trên dòng override của class Main. gameview game; Rào dòng setcontentView lại và thêm 2 dòng sau game=new gameview(this); setContentView(game);

Chạy thử để thấy nhân vật đã ra màn hình.

Nền ứng dụng có vẻ chưa trắng lắm, thêm dòng sau game.setBackgroundColor(Color.WHITE); vào trên dòng setContentView(game); Ta vẽ nhân vật tại vị trí 50, 100, 50 là tọa độ x, 100 là y.

Dù bạn để màn hình ngang hay dọc thì chiều ngang của thiết bị luôn là x, dọc luôn là y. Nên lúc quay ngang thì x lớn hơn y. Bây giờ để icon di chuyển, hãy khai báo biến intx=0; dưới dòng extends. Sửa số 50 trong lệnh draw thành 50+x, thêm hai dòng x=x+2; invalidate();

Chạy thử để thấy icon đã di chuyển sang phải. Tiếp tục thêm vào dưới dòng extends inty=0; Sửa số 100 trong lệnh draw thành 100+y, thêm dòng y=y+2; Chạy thử để thấy icon di chuyển xuống dưới.

Bây giờ ta muốn icon di chuyển ngang qua màn hình, đi hết lại chui ra đi tiếp thì thế nào? Khai báo thêm hai biến r, c dưới dòng extends intr, c; Thêm vào dưới dòng super(context); DisplayMetrics metrics = getResources().getDisplayMetrics(); r = metrics.widthPixels; c = metrics.heightPixels; Sửa lệnh draw thành canvas.drawBitmap(mcuoi, x, 100, null); Thêm lệnh if if(x>r){ x=0; } Ta để là nếu khi nào x tăng lên lớn hơn độ rộng màn hình thì nó quay về 0. Để khi quay lại icon trông có vẻ chui ra từ bên trong lề trái, ta thay vào trong lệnh if x=-mcuoi.getWidth(); Ta lấy số âm của độ rộng icon, tức là mép phải của nó vừa đúng bằng mép trái màn hình nên trông nó như đi vào từ bên trong.

Bây giờ ta muốn icon đi chạm lề phải thì đi ngược lại. Khai báo một biến booleanphai=true; Sửa code thành. if(phai==true){ x=x+2; } else{ x=x-2; } if(x>r){ phai=false; } if(x<0){ phai=true; }

Bây giờ ta muốn icon đi sang phải khi có chạm tay vào màn hình, nếu không chạm nó tự lùi về bên trái. Copy các dòng sau xuống dưới invalidate nhưng ở ngoài ngoặc. @Override publicboolean onTouchEvent(MotionEvent event) { switch (event.getAction() & MotionEvent.ACTION_MASK) { //nhấc tay case MotionEvent.ACTION_UP: phai = false; break; //chạm tay case MotionEvent.ACTION_DOWN: phai=true; } returntrue; }

Chạy thử, lúc icon chạy về trái hãy chạm tay vào, nó chạy sang phải, hết đường nó lại quay về dù vẫn đang chạm tay, đó là vì khi đó lệnh if(x>r)có hiệu lực do nó lại được gọi sau hành vi chạm tay. if(x>r){ phai=false; } Khi đang chạy chương trình, hàm invalidate() liên tục cập nhật vị trí icon và các biến, do tọa độ x, y thay đổi nên icon đi chuyển, nếu có biến nào phụ thuộc x,y nó cũng thay đổi theo. Bây giờ copy một icon hình kim cương vào drawable. Khai báo Bitmap kimcuong, khởi tạo. kimcuong = BitmapFactory.decodeResource(getResources(), R.drawable.kim); Vẽ nó ra. canvas.drawBitmap(kimcuong, 100, y, null); Làm nó di chuyển xuống dọc màn hình y=y+2;

Chạy thử để thấy nó đã đi xuống và mất tích luôn, kệ nó, để đơn giản ta kệ nó thế đã. Bây giờ ta muốn khi có va chạm giữa hai icon thì phát ra âm thanh. Thêm các dòng sau lên trên invalidate() Paint paint = new Paint(); paint.setColor(Color.parseColor("#FF00FF")); Rect touch1 = new Rect(x, 100,x+mcuoi.getWidth(), 100+mcuoi.getHeight()); Rect touch2 = new Rect(100, y,100+mcuoi.getWidth(), y+mcuoi.getHeight()); canvas.drawRect(x, 100,x+mcuoi.getWidth(), 100+mcuoi.getHeight(), paint); canvas.drawRect(100, y,100+mcuoi.getWidth(), y+mcuoi.getHeight(), paint); Ta vẽ các Rect hình chữ nhật bao lấy icon, kiểm tra vẽ đúng chưa bằng cách vẽ các hình tô màu đè lên chúng, chạy thử nếu thấy đúng vị trí khi icon di chuyển là được rồi.

Sau đó comment 2 dòng canvas.drawRectđi để ta còn nhìn thấy icon. Nếu icon của bạn có các khoảng trắng bao quanh, hình chữ nhật trông sẽ to hơn vì nó bao toàn bộ cái hình đó. Nếu muốn nó bé lại, ta chỉnh x+mcuoi.getWidth()thànhx+20 chẳng hạn, tùy bạn ước lượng cho vừa khít thì khi va chạm nó mới chuẩn. Tránh trường hợp lệch quá, giả sử ta làm game bắn máy bay đạn chưa chạm tới thì máy bay đã nổ tung rồi nó vô lý. Copy thêm các dòng sau vào. if (Rect.intersects(touch1, touch2)) { try { Uri notification = RingtoneManager .getDefaultUri(RingtoneManager.TYPE_NOTIFICATION); Ringtone r = RingtoneManager.getRingtone( getApplicationContext(), notification); r.play(); } catch (Exception e) { e.printStackTrace(); } } Ta dùng các Rect đã vẽ để lấy va chạm, tạo tiếng chuông báo.

Chạy thử, chạm tay điều chỉnh để icon chạm nhau, thay đổi tọa độ nếu khó chạm quá, phải có tiếng chuông khi va chạm mới đúng. Bây giờ ta muốn nếu có va chạm thì icon mặt cười bắn vào giữa màn hình đứng im, và hiện chữ Game over to tướng ra màn hình. Hãy tạo một biến booleanover=false; Bạn tự biết phải để nó chỗ nào. Trong lệnh set intersects, thêm dòng over=true; Copy thêm các dòng sau lên trên invalidate() if(over==true){ x=r/2; paint.setTextSize(60); paint.setTextAlign(Paint.Align.CENTER); canvas.drawText("Game Over", r / 2, 100, paint); }

Chạy thử để thấy kết quả.

Bây giờ ta lại muốn sau khi game over, nếu người dùng chạm tay vào màn hình thì chơi lại được từ đầu. Copy đoạn sau vào trong case MotionEvent.ACTION_DOWN: if(over==true){ over=false; x=-mcuoi.getWidth(); y=-kimcuong.getHeight(); }

Ta dùng lệnh if, nếu over chuyển sang true tức là lúc game over ta set nó là là false, đồng thời cho tọa độ icon về khởi đầu, ta cho nó chui kín vào trong bằng trừ độ rộng, cao, nếu để bằng 0 nó sẽ xuất hiện lại ngoài mép. Hiện lúc over icon kimcuong vẫn chạy xuống, muốn tất cả dừng lại, ta cho các lệnh làm chúng chạy vào trong lệnh if(over==false){

Bây giờ thay vì chạm là over, ta muốn đó là ăn điểm, ghi ra màn hình. Khai báo một biến intan=0; lên trên. Trong lệnh intersects, rào dòng over=true; thànhcomment, thêm dòng này vàoy=-100; Copy các dòng sau lên trên invalidate() if(y==-100){ an=an+1; } paint.setTextSize(33); canvas.drawText("Score: "+an, r/2-10, 25, paint);

Mỗi khi va chạm, ta bật y về -100 để làm biến mất icon kimcuong, đồng thời trong lệnh if(y==-100) ta tăng biến an lên 1, ghi nó ra màn hình, lệnh invalidate() đảm bảo số điểm được cập nhật liên tục. Chạy thử, chạm tay vào màn hình để icon va chạm nhau, mỗi lần lại thêm một điểm ghi ra Score. Bài này ta đã thấy các yếu tố cơ bản để làm game trong canvas, để xem những tùy biến phức tạp hơn, hãy xem bài làm game Flappy bird. Posted by Unknown at 7:33 PM

Labels: Lập trình Android cơ bản

No comments:

Search This Blog

Link

Free image
StackOverflow
MakeAppIcon
AndroidHive
Trần Duy Thanh

Chuyên mục

Button (3)
Chèn quảng cáo (1)
Color String (2)
Dialog (4)
Đọc dữ liệu (3)
Ghi dữ liệu (3)
Java cơ bản (6)
Kết nối Internet (4)
Label (3)
Làm ứng dụng Android (12)
Làm ứng dụng ios (5)
Làm View chuyển động (5)
Lập trình Android cơ bản (56)
Lập trình ios cơ bản (34)
Lập trình là gì ? (9)
ListView (6)
Màn hình (3)
Quay View (7)
Scrollview (1)
Spinner (3)
Submit Itune Connect (9)
Submit Play Store (4)
Swift cơ bản (6)
Swipe vuốt chạm (2)
TableView (3)
TextView (7)

Blog Archive

► 2019 (17)
- ► January (17)

► 2018 (14)
- ► December (14)

▼ 2017 (163)
- ► November (5)
- ▼ October (122)
  - Một số chú ý để tránh ứng dụng bị suspend, reject
  - Submit ứng dụng lên Play Store
  - 8-Điền thông tin thuế
  - 7-Cấu hình app trên Itune
  - 6-Upload file build lên Store
  - 5-Tạo provisioning
  - 4-Tạo Apple Indentifier
  - 3-Lấy certificate
  - 2-Mua tài khoản Apple Developer
  - 1-Thêm ảnh icon cho ứng dụng ios
  - Random vị trí ngẫu nhiên cho icon
  - Play file mp4 trong Android
  - Giả tiếng ngáy
  - Chơi nhạc trực tuyến Swift
  - Chơi nhạc ở chế độ nền Swift
  - Hiện ProgressDialog trong khi chờ đọc mạng
  - Nghe nhạc trực tuyến
  - Swift play video file
  - Chèn quảng cáo Admob vào ứng dụng ios
  - Swift dialog với textField
  - Làm spinner trong Swift
  - Label có thể ấn được
  - Xóa dòng tableView
  - Vuốt để chuyển màn hình Swift
  - Đọc thơ Nhật cổ
  - Đọc thơ Nhật cổ (2)
  - La bàn
  - Thước kẻ
  - Kiểm tra kết nối mạng Swift
  - Tạo file apk để chuẩn bị submit
  - Cách làm game trong Canvas
  - Căn chỉnh chữ trong Label Swift
  - Swift ghi dữ liệu
  - Swift đọc file txt
  - Ứng dụng không chạy dù không có lỗi
  - Các kiểu chuyển màn hình ios
  - Quay view với Swift
  - Làm đèn nhấp nháy trong Swift
  - Tạo điểm nhấp nháy
  - Làm tròn số thập phân Swift
  - Tạo khoảng thời gian chờ Swift
  - Ký tự số độ Swift
  - Làm đồng hồ đếm ngược Swift
  - Đặt chồng các view lên nhau, lấy kích thước view
  - Ẩn hiện một image
  - Di chuyển một view Swift
  - Đổi tên ứng dụng
  - Tạo ảnh Lauchscreen cho ứng dụng ios
  - Chạy ứng dụng trên máy thật
  - Tạo viền một phía Swift
  - Trim bỏ khoảng trắng
  - Tô chữ nhiều màu Swift
  - Custom button Swift
  - Cho view vào giữa
  - Quay view đi một góc
  - Máy ảo ios không có kết nối mạng
  - Kết nối điện thoại Android vào máy Mac để vào 3G
  - Chú ý với khai báo mảng Swift
  - Lấy ảnh màn hình máy Mac
  - Ứng dụng mới tạo có màn hình trắng
  - Tạo nút Quit cho ứng dụng Swift
  - Bỏ gợi ý code của Xcode
  - Lấy ngày tháng trong điện thoại
  - Textview trong Swift
  - Scrollview trong Swift
  - Custom danh sách Swift
  - Giả tiếng ngáy
  - Flappy bird (2)
  - Flappy bird
  - Layout weight
  - Quay tròn image trong Canvas
  - ListView with images android
  - Hiển thị ký hiệu số đo độ
  - Chụp ảnh bắt ma
  - Vuốt để chuyển sang màn hình mới
  - Ứng dụng không có code
  - Thread
  - Set wallaper từ ảnh
  - 1 - Lấy ảnh screenshot của ứng dụng
  - Hiển thị đồng hồ
  - Ứng dụng có nhiều tab
  - Chỉnh vị trí của Toast
  - Lấy ngày tháng trên điện thoại
  - Đọc thơ Nhật cổ (2)
  - Đọc thơ Nhật cổ
  - Dialog
  - Custom font textView trong Android
  - Làm đồng hồ đếm ngược trong Android
  - Tạo hiệu ứng lúc lắc cho view
  - Quay image như quay đồng xu
  - Làm chữ cong, vẽ vòng tròn trong Android
  - Làm đèn nhấp nháy trong Android
  - Chuyển ảnh qua activity khác
  - Làm image chuyển động qua lại
  - Tô màu chữ trong Android
  - Relaytive layout
  - Quay tròn một View
  - Vô hiệu hóa TextView, Button Android
  - Margin và Padding
  - Tạo hình ảnh splash khi mở ứng dụng
- ► September (36)

Flags

Page Views

Từ khóa » Thiết Kế Game Trên Canva

Cách Làm Game Trong Canvas - Lập Trình Di động

Wednesday, October 4, 2017