Đang tải... (xem toàn văn)
Html5 canvas lap trinh game 2 d v1 0 Lý thuyết và demo thực hành về lập trình game 2d với API canvas trong, Html5 canvas lap trinh game 2 d v1 0 Lý thuyết và demo thực hành về lập trình game 2d với API canvas trong Html5 canvas lap trinh game 2 d v1 0 Lý thuyết và demo thực hành về lập trình game 2d với API canvas trong Html5 canvas lap trinh game 2 d v1 0 Lý thuyết và demo thực hành về lập trình game 2d với API canvas trong Html5 canvas lap trinh game 2 d v1 0 Lý thuyết và demo thực hành về lập trình game 2d với API canvas trong
YIN YANG 2012 HTML5 Canvas Lập Trình Game 2D v1.0 Lý thuyết demo thực hành lập trình game 2D với API Canvas Html5 http://vietgamedev.net/ http://yinyangit.wordpress.com/ 1/7/2012 Yin Yang HTML5 Canvas - Lập trình Game 2D |P age Yin Yang HTML5 Canvas - Lập trình Game 2D LỜI TỰA Flash công nghệ hiệu quả, phổ biến cho phép lập trình viên tạo ứng dụng với đầy đủ hiệu ứng hình ảnh, âm đặc sắc Những cơng nghệ tương tự Java Applet hay “đứa con” sáng giá Microsoft Silverlight đứng vững cạnh tranh với Flash Nhưng vấn đề nảy sinh khả tương tác công nghệ với thành phần xung quanh (như thẻ HTML) dường khơng thể Chúng bị cô lập hoạt động độc lập với giới bên Giải pháp quay trở lại sử dụng HTML, Javascript CSS, lập trình viên tạo ứng dụng với hiệu ứng đặc biệt không bị giới hạn mà công nghệ gặp phải Nhưng trở ngại lớn khơng có đủ API để tạo ứng dụng tương tự Flash Và tốc độ ứng dụng HTML chậm, khơng thể chấp nhận với game có u cầu cấu hình trung bình Nhưng với đời HTML5 với thành phần API mới, giới hạn bị phá bỏ bước thay dần công nghệ Flash Với ứng dụng cần hiệu ứng đồ họa chuyển động đặc biệt, lập trình viên sử dụng Canvas với kiểu bitmap SVG với kiểu vector Không áp dụng cho việc thiết kế trang web trực quan, HTML5 áp dụng để tạo thư viện đồ họa giúp tạo ứng dụng đồ thị, game môi trường 2D 3D ứng dụng desktop Một điều đáng mừng HTML, Javascript CSS khơng cịn bị giới hạn trình duyệt mà triển khai desktop dạng widget, thiết bị di động thiết bị Như vậy, lập trình viên khơng cần sử dụng hay yêu cầu người dùng cài đặt thư viện để chạy ứng dụng họ Một lợi lớn mà có HTML đạt Tuy nhiên việc xây dựng game trình duyệt trải nghiệm khó khăn phải cân nhắc việc chọn lựa thư viện đại, đầy đủ chức hay làm theo API cấp thấp HTML (thơng qua Javascript) Q trình thực sách khơng thể tránh khỏi sai sót, bạn đọc gửi phản hồi http://vietgamedev.vn blog http://yinyangit.wordpress.com gửi email trực tiếp cho (yinyang.it@gmail.com) để thắc mắc, trao đổi giúp sửa đổi, cập nhật cần thiết Xin cảm ơn! |P age Yin Yang HTML5 Canvas - Lập trình Game 2D Mục lục A GIỚI THIỆU B HTML5 API 10 I Web Storage (DOM Storage) 10 Giới thiệu 10 Interface Storage 10 Local Storage Session Storage 11 Sử dụng 12 Storage event 14 Thêm phương thức vào Storage 15 II Web SQL Database 16 Giới thiệu 16 Open Database 16 Transaction 17 Execute SQL 17 III Web Worker 18 Giới thiệu 18 Ví dụ đơn giản nhất: 19 Kết luận 20 Tạo chuyển động với WindowAnimationTiming API 20 IV WindowAnimationTiming 21 Lợi ích hiệu 22 C setTimeout setInterval 21 Sử dụng 23 Canvas 2D API 25 Vẽ ảnh thao tác với pixel 25 I Nạp vẽ ảnh 25 Thao tác với pixel 26 Vẽ hình chuột 30 II Xác định tọa độ chuột 30 Lưu nội dung Canvas 31 III Chọn di chuyển đối tượng 34 Tạo cấu trúc liệu 34 Các phương thức vẽ context 35 |P age Yin Yang HTML5 Canvas - Lập trình Game 2D Các kiện chuột Canvas 36 Sử dụng bàn phím 37 IV Bắt kiện bàn phím 37 Kiểm tra trạng thái nhiều phím 38 Giới hạn phím bắt 38 Chuyển động Canvas 39 V Cơ 39 Thêm hiệu ứng bóng di chuyển 41 Kiểm tra va chạm 42 Kĩ thuật lập trình Game – Cơ 44 D Vòng lặp game (Game loop) hoạt động nào? 44 I Vòng lặp 44 Vịng lặp có tính tốn thời gian 45 Giải pháp cuối 46 Ví dụ hồn chỉnh 46 Kiểm tra va chạm: hình trịn chữ nhật 47 II Giữa hai hình chữ nhật 47 Giữa hai hình trịn 48 Giữa hình trịn hình chữ nhật 48 III Kiểm tra điểm nằm đoạn thẳng 50 IV Vector 2D 51 Khái niệm 51 Vector đơn vị (Unit Vector, Normalized Vector) 51 Tích vơ hướng (Dot product, Scalar product) 52 Phép chiếu (Projection) 52 Hiện thực với javascript 53 V Khoảng cách từ điểm đến đoạn thẳng 54 VI Giao điểm hai đường thẳng 56 Tạo phương trình đường thẳng từ đoạn thẳng 56 Tính giao điểm hai đường thẳng 57 Minh họa với HTML5 Canvas 58 VII Va chạm phản xạ 58 Kiểm tra hai đoạn thẳng cắt 58 Phương pháp 59 VIII Va chạm đường tròn đoạn thẳng 59 |P age Yin Yang HTML5 Canvas - Lập trình Game 2D Va chạm 59 Phản xạ 60 Va chạm nhiều đường tròn 62 IX Xử lý va chạm nhiều đường tròn 63 Kiểm tra va chạm dựa pixel 64 X Một wrapper Image 65 Xác định vùng giao hai hình chữ nhật 66 Kiểm tra va chạm 67 Kỹ thuật lập trình Game – Nâng cao 69 E Cuộn ảnh đồ (Map Scrolling) 69 I Ảnh nhiều tầng 69 Cuộn giả 70 … cuộn thật 70 II Tạo Amimated Sprite 71 III Nạp trước hình ảnh tài nguyên 75 IV Phóng to/thu nhỏ game nút cuộn chuột 76 Sự kiện Mouse Wheel javascript 78 Thay đổi kích thước đồ 78 Vẽ vùng đồ 79 Áp dụng cho nhân vật đồ 79 Thay đổi kích thước Canvas theo trình duyệt 80 V Điều chỉnh canvas thao kích thước trình duyệt 80 Sử dụng Full Screen API 82 VI Giới thiệu 82 Ví dụ 84 Tạo menu chuyển đổi hình Game 86 VII Lớp Screen 87 F Lớp MenuItem 86 Kiểm tra kết 89 AI game 90 I Giới thiệu 90 II Phân tích để lựa chọn thuật toán 90 III Thuật toán Breadth First Search 91 IV Các quy tắc game 92 V Xây dựng lớp Queue dựa mảng 93 |P age Yin Yang HTML5 Canvas - Lập trình Game 2D VI Cài đặt thuật toán Breadth First Search 94 VII Di chuyển đối tượng theo đường 96 VIII Vịng lặp game 96 Một tảng game 2D side-scrolling 98 G Cơ 98 I Tạo đồ 98 Kiểm tra va chạm 98 Thêm chức nhân vật 101 II Lớp Character 101 Lớp Monster 103 Lớp Player 104 Lớp Map 105 Một số ứng dụng minh họa 107 H Game đua xe 107 I Các thông số xe 107 Di chuyển quay xe 107 Kiểm tra va chạm (tiếp xúc) với địa hình 108 Hạn chế xe di chuyển xoay bị va chạm 109 Tạo checkpoint 109 Kết 109 Game bắn đại bác 110 II Bản đồ địa hình 110 Phá hủy phần địa hình 111 Trọng lực Gió 111 Di chuyển Cannon 111 Sát thương đạn 111 Hỗ trợ nhiều người chơi 112 Kết 112 III Game Mario 113 I Lời kết 114 J Tài liệu tham khảo 114 |P age Yin Yang HTML5 Canvas - Lập trình Game 2D |P age Yin Yang HTML5 Canvas - Lập trình Game 2D A GIỚI THIỆU HTML5 hỗ trợ hầu tất trình duyệt Nó tập hợp tính đặc biệt ta tìm thấy hỗ trợ cho số phần đặc trưng canvas, video định vị địa lý Những đặc điểm kỹ thuật HTML5 xác định làm dấu ngoặc nhọn tương tác với JavaScrip, thông qua tài liệu thông qua tài liệu Object Model (DOM) HTML5 không xác định tag , DOM API tương ứng cho đối tượng video DOM Bạn sử dụng API để tìm kiếm hỗ trợ cho định dạng video khác nhau, nghe nhạc, tạm dừng đoạn video, mute audio , theo dõi video tải về, thứ khác bạn cần phải xây dựng trải nghiệm người dùng phong phú xung quanh tag Không cần phải vứt bỏ thứ gì: Ta khơng thể phủ nhận HTML định dạng đánh dấu thành công từ trước đến HTML5 xây dựng dựa thành cơng Bạn khơng cần phải bỏ đánh dấu có Bạn khơng cần phải học lại điều bạn biết Nếu ứng dụng web bạn trước sử dụng HTML 4, hoạt động HTML5 Bây giờ, bạn muốn cải thiện ứng dụng web, bạn đến nơi Ví dụ cụ thể: HTML5 hỗ trợ tất hình thức kiểm sốt từ HTML 4, bao gồm điều khiển đầu vào Một số số hạn bổ sung trượt date pickkers, thành phần khác tinh tế Ví dụ, loại email input trơng giống textbox, trình duyệt linh động tùy biến bàn phím hình họ để dễ dàng nhập địa email Các trình duyệt cũ không hỗ trợ loại email input xem văn thơng thường, hình thức làm việc khơng có thay đổi đánh dấu kịch hack Điều có nghĩa bạn bắt đầu cải thiện hình thức web bạn ngày hôm nay, số khách truy cập vào web bạn Rất dễ dàng để bắt đầu: "Nâng cấp" lên HTML5 đơn giản việc thay đổi thẻ DOCTYPE bạn DOCTYPE cần phải nằm dòng tất trang HTML Các phiên trước HTML định nghĩa nhiều loại doctype, lựa chọn doctype rắc rối Trong HTML5 có DOCTYPE: Nâng cấp lên DOCTYPE HTML5 không phá vỡ cấu trúc tài liệu bạn, thẻ lỗi thời trước định nghĩa HTML vẽ HTML5 Nhưng cho phép bạn sử dụng xác nhận thẻ , , … |P age Yin Yang HTML5 Canvas - Lập trình Game 2D B HTML5 API HTML5 bổ sung nhiều API mà lập trình viên sử dụng để hỗ trợ cho ứng dụng game Ví dụ lưu lại liệu với Web Storage, Web Sql, Indexed DB, thực công việc song song với Web Worker, giao tiếp với server thơng qua Web Socket Do thời lượng có lượng, tơi trình bày phần nhỏ số I Web Storage (DOM Storage) HTML5 cung cấp tính lưu trữ liệu client với dung lượng giới hạn lớn nhiều so với cookie Tính gọi Web Storage chia thành hai đối tượng localStorage sessionStorage Bài viết giúp bạn nắm kiến thức đầy đủ sử dụng hai đối tượng việc lập trình web Giới thiệu Hiện nay, cookie cho phép lưu trữ tối đa 4KB vài chục cookie cho domain Vì cookie dùng để lưu trữ thông tin đơn giản ngắn gọn email, username, … giúp người dùng đăng nhập tự động vào trang web Điều khiến cho trang web muốn nâng cao hiệu suất làm việc cách cache liệu client thực Sự xuất Web Storage điểm nhấn cho việc đời ứng dụng web có khả tương tác nạp liệu tức trình duyệt Một hiệu q uả dung lương truyền tải qua mạng giảm thiểu đáng kể Ví dụ ứng dụng tra cứu sách trực tuyến, sách tra lưu lại máy người dùng Khi cần tra lại, máy người dùng không cần kết nối đến server để tải lại liệu cũ Với ứng dụng web có sở liệu nhỏ gọn, lập trình viên thực việc cache “âm thầm” sở liệu xuống client sau người dùng thoải mái tra cứu mà không cần request đến server Interface Storage interface Storage { readonly attribute unsigned long length; DOMString? key(unsigned long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear(); }; 10 | P a g e HTML5 Canvas - Lập trình Game 2D Yin Yang var b; this.isJumping = true; if(vbottom >= this.map.height) { this.top = this.map.height-this.height; this.speedY = 0; this.isJumping = false; } else if(b = this.map.contain(this.left+2,vbottom) || this.map.contain(this.right-2,vbottom)) { this.top = b.top-this.height; this.speedY = 0; this.isJumping = false; } else if(b = this.map.contain(this.left+2,vtop) || this.map.contain(this.right-2,vtop)) { this.top = b.bottom; this.speedY = 0; } vtop = this.top+this.speedY; vbottom = vtop+this.height; if(this.left0) this.speedX = 0; } this.top = vtop; this.bottom = vbottom; this.left += this.speedX; this.right = this.left + this.width; } 100 | P a g e Yin Yang HTML5 Canvas - Lập trình Game 2D II Thêm chức nhân vật Lớp Character Đây lớp tảng cho đối tượng chuyển động (có thể thay đổi vị trí) game Các đối tượng người chơi, quái vật hay NPC (non-player character) Ta định nghĩa nhiều thuộc tính lớp để xác định vị trí, tốc độ, kích thước nhân vật Bên cạnh đó, ta thêm số thuộc tính boolean hành vi (hay khả năng) nhân vật: - canDestroyObstacles: khả phá hủy chướng ngại vật (bằng cách dùng đầu) nhân vật Khi nhân vật nhảy lên, đầu chạm trúng chướng ngại vật phá hủy (gạch), ta kiểm tra thuộc tính để xác định xem chướng ngại vật có bị phá hủy hay không - isAutoMoving: Dùng cho nhân vật không bị người chơi (player) điều khiển (quái vật) - canJump: Nhân vật nhảy hay khơng function Character(map,options){ if(!options) options = {}; this.map = map; this.left = options.left || 0; this.top = options.top || 300; this.height = options.height || 15; this.width = options.width || 15; this.jumpPower = options.jumpPower || 5; this.speed = options.speed || 2; this.speedX = (Math.random()=b.left && cx=this.map.width){ alert("Game Over!"); return 1; } if(this.isFalling) // die { this.speedY += GRAVITY; this.top += this.speedY; return (this.top>this.map.height)? : ; } Character.prototype.update.call(this); this.collide(this.map.monsters); } Kiểm tra va chạm với monster, ta xem player monster hình chữ nhật cần kiểm tra xem hai hình có cắt khơng: Player.prototype.collide = function(monsters){ for(m in monsters) { var mon = monsters[m]; if(!mon) continue; if(!(this.left > mon.right || this.right < mon.left || this.top > mon.bottom || this.bottom < mon.top)) { if(this.bottom0) { mon.die(); } else { this.die(); break; } } } } 104 | P a g e HTML5 Canvas - Lập trình Game 2D Yin Yang Lớp Map Nếu coi lập trình viên lập trình viên thượng đế, đồ “thế giới” thu nhỏ nơi mà thượng đế cho vận hành quy luật để tạo “cuộc sống” Mặc dù đồ đơn giản nhiều game, dạng game phiêu lưu này, đóng vai trị quan trọng (có thể so với Monster) Một “thế giới” nhỏ bé khiến người chơi nhanh kết thúc vòng chơi khơng thể khơi lên tị mị muốn khám phá họ Khi vật thể (chướng ngại vật), ta xóa vùng tương ứng buffer (ảnh đồ) gán giá trị lại cho liệu mặc định (0): function clearCell(left,top,col,row) { data[col+row*COLS] = 0; context.save(); context.globalCompositeOperation = "destination-out"; context.fillStyle = "rgba(0,0,0,1)"; context.fillRect(left,top,CELL_SIZE,CELL_SIZE); context.restore(); } Để kiểm tra va chạm với chướng ngại vật, ta tạo phương thức collide() với giá trị trả đối tượng lưu giữ giá trị vị trí, kích thước chướng ngại vật đó: this.colllide = function(x,y,canDestroy){ var b = this.contain(x,y); if(b) { if(canDestroy && b.type==BRICK) { clearCell(b.left,b.top,b.col,b.row); } return b; } return false; }; this.contain = function(x,y){ var col = Math.floor(x/CELL_SIZE); var row = Math.floor(y/CELL_SIZE); var val = data[col+row*COLS]; if(val>0) { var b = { left: col*CELL_SIZE, top: row*CELL_SIZE, col: col, row: row, type: val, }; b.right = b.left+CELL_SIZE; b.bottom = b.top+CELL_SIZE; return b; } 105 | P a g e Yin Yang HTML5 Canvas - Lập trình Game 2D return false; }; Trong game này, lớp Map nơi chứa Monster Để làm Monster liên tục số lượng giá trị Ta viết phương thức update() sau: this.update = function(){ // generate random monsters if(this.monsters.length