初心者向けJavaScript/HTML5ゲームプログラミング
4 likes5,991 views
JavaScript/HTML5を用いたゲームプログラミングの解説
初心者向けJavaScript/HTML5ゲームプログラミング
- 1. 初心者向け JavaScript/HTML5 ゲームプログラミング 2015年7月25日 #1.Study program of dearness∼プログラミング勉強会∼ @zukkun
- 2. 自己紹介 • 北海道天塩町出身 • 先週、30歳になりました • 小学5年 プログラミングに目覚める (BASIC) • VisualBasic/VisualC++でDirectXで ゲームプログラミングして遊ぶ • ゲーム会社でプログラマとして5年過 ごした(主にC++) • 現在：システム開発会社に転職して 色々やってる @zukkun
- 3. ゲームを作りたい！
- 4. 昔 • BASIC • RPGツクール • HSP • DXライブラリ
- 5. 今 • Unity • Cocos2d-x • UnrealEngine
- 7. ＼ Webブラウザ ／
- 8. えっ？
- 11. 使用するツール • Webブラウザ • Google Chrome • Mozilla Firefox など • テキストエディタ （Vimとか、Vimとか、Vimとか）
- 12. フレームワークは？
- 13. HTML5ゲームフレームワーク • Phaser • Impact • CreateJS • enchant.js • melonJS • LimeJS • Kiwi.js • ……ほか多数（HTML5ゲームフレームワーク戦国時代）
- 15. HTML JavaScript SceneGraph Sprite AnimationPhysics SpriteSheet TextureAtlas Particles Camera Input Sound Tilemap Device Scaling Plugin 覚えなければいけないものが 山のように押し寄せる！
- 17. フレームワークは 使いません
- 18. フルスクラッチ
- 19. フルスクラッチ 【 full scratch 】 • フルスクラッチとは、既存のものを一切流用せずにまったく 新規に開発すること。もとは模型の用語。 • システムやソフトウェアの開発において、パッケージ製品や 他のソフトのソースコード、雛形などを使用せず、ゼロから 開発していくことをスクラッチ開発というが、まったく何も 流用していないことを強調したいときにフルスクラッチとい う。 • フルスクラッチとは｜full scratch - 意味/解説/説明/定義 ： IT用語辞典 http://e-words.jp/フルスクラッチ.html
- 21. HTML (index.html) <!DOCTYPE> <html> <head> <meta charset=“UTF-8”> <title>ゲーム</title> </head> <body> <canvas id=“main_canvas” width=“640px” height=“480px”> </canvas> </body> </html>
- 22. HTML (index.html) <!DOCTYPE> <html> <head> <meta charset=“UTF-8”> <title>ゲーム</title> <script src=“main.js”></script> </head> <body> <canvas id=“main_canvas” width=“640px” height=“480px”> </canvas> </body> </html>
- 23. JavaScript (main.js) var canvas = null; var ctx = null;
- 24. JavaScript (main.js) var canvas = null; var ctx = null; // 初期化 function init() { }
- 25. JavaScript (main.js) var canvas = null; var ctx = null; // 初期化 function init() { canvas = document.querySelector(‘#main_canvas’); // document.getElementByIdでも良い }
- 26. JavaScript (main.js) var canvas = null; var ctx = null; // 初期化 function init() { canvas = document.querySelector(‘#main_canvas’); ctx = canvas.getContext(‘2d’); }
- 28. JavaScript (main.js) var canvas = null; var ctx = null; // 初期化 function init() { canvas = document.querySelector(‘#main_canvas’); ctx = canvas.getContext(‘2d’); } CanvasRenderingContext2D
- 29. init関数を呼ぶ // init(); // いきなり呼び出すと、 // HTML要素が構築される前に呼び出してしまう window.addEventListener(‘load’, init);
- 30. init関数を呼ぶ // init(); // いきなり呼び出すと、 // HTML要素が構築される前に呼び出してしまう window.addEventListener(‘load’, init); Functionオブジェクト
- 32. 画像を読み込む var image = null; // 画像を読み込む function loadImage() { image = new Image(); }
- 33. 画像を読み込む // 画像を読み込む function loadImage() { image = new Image(); image.src = ‘box.png’; } box.png
- 34. 画像を読み込む // 画像を読み込む function loadImage() { image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 }; }
- 35. 画像を読み込む // 画像を読み込む function loadImage() { image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 }; } 標準で非同期読み込み！
- 36. 画像を読み込む // 画像を読み込む function loadImage(onComplete) { image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 }; }
- 37. 画像を読み込む // 画像を読み込む function loadImage(onComplete) { image = new Image(); image.src = ‘box.png’; image.onload = function() { // 読み込み完了 onComplete(); }; }
- 39. 画像を読み込む function init() { : loadImage(function() { // 画像読み込み完了後に行う処理 }); }
- 40. 更新処理と描画 function update() { render(); } function render() { }
- 41. 画面をクリア function render() { // 画面をクリア // clearRect(X座標, Y座標, 幅, 高さ) ctx.clearRect( 0, 0, canvas.width, canvas.height); }
- 42. 画像の描画 function render() { // 画面をクリア ctx.clearRect( 0, 0, canvas.width, canvas.height); // drawImage(画像, X座標, Y座標) ctx.drawImage(image, 0, 0); }
- 43. 画像の描画 function render() { // 画面をクリア ctx.clearRect( 0, 0, canvas.width, canvas.height); // drawImage(画像, X座標, Y座標) ctx.drawImage(image, 0, 0); }
- 44. updateしてみる function init() { : loadImage(function() { // 画像読み込み完了後に行う処理 update(); }); }
- 45. 実行してみる
- 47. 箱を動かしてみる // みかん箱のX座標 var boxX = 0;
- 48. 箱を動かしてみる // みかん箱のX座標 var boxX = 0; function update() { boxX += 1; render(); }
- 49. 箱を動かしてみる function render() { : ctx.drawImage(image, boxX, 0); }
- 50. 実行してみる
- 51. はい というような感じでですね
- 60. WebGL 3D表示！
- 66. ならば 受けて立ちましょう
- 68. ご清聴ありがとうござました