HTML5 Canvasベースのゲームの作成：AngularJSとCreateJSを使用したチュートリアル

ゲーム開発は、ソフトウェア開発業界に絶えず挑戦している、より興味深い高度なプログラミング手法の1つです。

ゲームの開発に使用されるプログラミングプラットフォームは数多くあり、それらをプレイするためのデバイスは多数ありますが、Webブラウザーでゲームをプレイする場合は、Flashベースの開発が依然として先導しています。

Flashベースのゲームを HTML5 Canvasテクノロジーにより、モバイルブラウザーでも再生できるようになります。そして、Apache Cordovaを使用すると、 熟練したWeb開発者 それらをクロスプラットフォームのモバイルゲームアプリに簡単にラップできます。

の人々 CreateJS それ以上のことを始めました。

EaselJS 、CreateJSのスイートの一部であるため、HTML5Canvasでの描画が簡単になります。高性能と数千の要素を備えたカスタムデータ視覚化を構築することを想像してみてください。スケーラブルベクターグラフィック（SVG）は、DOM要素を使用するため、適切な選択ではありません。約600のDOM要素で、初期レンダリング、再描画、およびアニメーションが高価な操作になると、ブラウザーは圧倒されます。 HTML5 Canvasを使用すると、これらの問題を簡単に回避できます。キャンバスの描画は紙の上のインクのようなものであり、DOM要素とそれに関連するコストはありません。

つまり、Canvasベースの開発では、要素を分離し、それらにイベントと動作を付加する際に、より注意を払う必要があります。 EaselJSが助けになります。個々の要素を処理しているかのようにコーディングして、EaselJSライブラリにマウスオーバー、クリック、および衝突を処理させることができます。

SVGベースのコーディングには1つの大きな利点があります。SVGには古い仕様があり、開発で使用するためにSVGアセットをエクスポートする設計ツールがたくさんあるため、設計者と開発者の協力がうまく機能します。などの人気のあるライブラリ D3.JS 、およびのような新しい、より強力なライブラリ SnapSVG 、テーブルにたくさん持ってきてください。

デザイナーから開発者へのワークフローがSVGを使用する唯一の理由である場合は、次の拡張機能を検討してください。 アドビイラストレーター （AI）AIで作成された形状からコードを生成します。私たちのコンテキストでは、このような拡張機能はEaselJSコードまたはProcessingJSコードを生成します。どちらもHTML5Canvasベースのライブラリです。

結論として、新しいプロジェクトを開始する場合、SVGを使用する理由はもうありません！

SoundJS CreateJSスイートの一部です。 HTML5オーディオ仕様のシンプルなAPIを提供します。

Ruby onRailsのしくみ

PreloadJS ビットマップ、サウンドファイルなどのアセットをプリロードするために使用されます。他のCreateJSライブラリと組み合わせて使用​​するとうまく機能します。

EaselJS、SoundJS、およびPreloadJSを使用すると、JavaScriptの忍者にとってゲーム開発が非常に簡単になります。そのAPIメソッドは、Flashベースのゲーム開発を使用したことのある人なら誰でも知っています。

「これはすべて素晴らしいです。しかし、一連のゲームをFlashからHTML5に変換する開発者のチームがある場合はどうなるでしょうか。このスイートでそれを行うことは可能ですか？」

答え： 「はい。ただし、すべての開発者がJediレベルである場合に限ります！」

さまざまなスキルセット開発者のチームがいる場合（よくあることですが）、CreateJSを使用して、スケーラブルでモジュール式のコードを期待するのは少し怖いかもしれません。 CreateJSスイートを AngularJS ？最良で最も採用されているフロントエンドJSフレームワークを導入することで、このリスクを軽減できますか？

はい 、およびこのHTML5 Canvasゲームのチュートリアルでは、CreateJSとAngularJSを使用して基本的なゲームを作成する方法を説明します。

種を蒔く

AngularJSは、開発チームが次のことを行えるようにすることで、複雑さを大幅に軽減します。

剛体のダイナミクスチュートリアル

1. チームメンバーがゲームのさまざまな側面に集中できるように、コードのモジュール性を追加します。
2. コードをテスト可能で保守可能な個別の部分に分割します。
3. コードの再利用を有効にして、1つのファクトリクラスを複数回インスタンス化し、異なるが類似したアセットと動作をロードするために再利用できるようにします。
4. 複数のチームメンバーがお互いのつま先を踏まずに並行して作業できるため、開発をスピードアップします。
5. 開発者を悪いパターンの使用から保護します（Javascriptには悪名高い悪い部分があり、JSLintは私たちに非常に役立つだけです）。
6. 堅実なテストフレームワークを追加します。

私のように、あなたが「いじくり回し」または触覚学習者である場合は、次のコードを取得する必要があります。 GitHub 学習を開始します。私の提案は、チェックインを確認し、CreateJSコードにAngularJSの優れた機能を追加することのメリットを得るために行った手順を理解することです。

AngularJSシードプロジェクトの実行

まだ行っていない場合は、インストールする必要があります nodeJS このデモを実行する前に。

AngularJSシードプロジェクトを作成した後、またはからダウンロードした後 GitHub 、実行npm installすべての依存関係をアプリフォルダーにダウンロードします。

アプリケーションを実行するには、npm startを実行します同じフォルダからhttp://localhost:8000/app/#/view1に移動しますお使いのブラウザで。ページは下の画像のようになります。

EaselJSとAngularJSの出会い

CreateJSライブラリ参照をAngularJSシードプロジェクトに追加します。 CreateJSスクリプトがAngularJSの後に含まれていることを確認してください。

次に、アプリケーションをクリーンアップします。

• アプリフォルダーからview2フォルダーを削除します
• 以下に示すコードを削除して、index.htmlからメニューとAngularJSのバージョン情報を削除します。

view2を削除します次の行を削除して、app.jsのモジュール

myApp.view2,

これまでAngularJSを使用したことがなく、AngularJSディレクティブに精通していない場合は、 このチュートリアルを確認してください 。 AngularJSのディレクティブは、HTMLにいくつかの新しいトリックを教える方法です。これらはフレームワークで最もよく考えられた機能であり、AngularJSを強力で拡張可能にします。

特殊なDOM機能またはコンポーネントが必要な場合は、オンラインで検索してください。のような場所ですでに利用可能である可能性が高いです Angularモジュール 。

次に行う必要があるのは、EaselJSの例を実装する新しいAngularJSディレクティブを作成することです。 /app/view1/directives/spriteSheetRunner.jsにある新しいファイルにspriteSheetRunnerという新しいディレクティブを作成します。

ディレクティブが作成されたら、/app/app.jsを更新してアプリに依存関係を追加します以下のように：

index.htmlにディレクティブコードを含めますspriteSheetRunner.jsへの参照を追加します。

準備がほぼ整いました！ゲームアセットをアプリフォルダーにコピーします。画像を用意しましたので、お気軽にダウンロードしてアプリ/アセットフォルダに保存してください。

• app / assets / spritesheet_grant.png
• app / assets / Ground.png
• app / assets / hill1.png
• app / assets / hill2.png
• app / assets / sky.png

最後のステップとして、新しく作成したディレクティブをページに追加します。これを行うには、loaderSvc.jsを変更しますファイルを作成し、それをワンライナーにします。

アプリケーションを起動すると、ランナーが動き始めます:)

scala（プログラミング言語）

これが最初のAngularJSまたは最初のCreateJSアプリケーションである場合は、お祝いしてください。本当にクールなものを作成しました。

サービスへのアセットのプリロード

AngularJSのサービスは、主にコードとデータを共有するために使用されるシングルトンです。サービスを使用して、アプリケーション全体で「ゲームアセット」を共有します。 AngularJSサービスの詳細については、 AngularJSドキュメント 。

AngularJS開発サービス すべてのアセットを1か所でロードおよび管理するための効果的なメカニズムを提供します。アセットの変更はサービスの個々のインスタンスに伝播されるため、コードの保守がはるかに簡単になります。

//app/view1/services/loaderSvc.js myServices.service('loaderSvc', function () { var manifest = [ {src: 'spritesheet_grant.png', id: 'grant'}, {src: 'sky.png', id: 'sky'}, {src: 'ground.png', id: 'ground'}, {src: 'hill1.png', id: 'hill'}, {src: 'hill2.png', id: 'hill2'} ], loader = new createjs.LoadQueue(true); this.getResult = function (asset) { return loader.getResult(asset); }; this.getLoader = function () { return loader; }; this.loadAssets = function () { loader.loadManifest(manifest, true, '/app/assets/'); }; }); という名前の新しいJSファイルを作成しますあなたのapp.jsフォルダ。

AngularJSでは、使用しているサービスを登録する必要があります。これを行うには、'use strict'; // Declare app level module which depends on views, and components angular.module('myApp',[ 'ngRoute', 'myApp.view1', 'myApp.version', 'myApp.services', 'myApp.directives']) .config(['$routeProvider', function($routeProvider) { $routeProvider.otherwise({redirectTo: '/view1'}); }]); var myServices = angular.module('myApp.services', []); を更新しますapp/view1/directives/spriteSheetRunner.jsへの参照を含めるファイル。

'use strict'; // Declare app level module which depends on views, and components angular.module('myApp',[ 'ngRoute', 'myApp.view1', 'myApp.version', 'myApp.services', 'myApp.uiClasses', 'myApp.directives']) .config(['$routeProvider', function($routeProvider) { $routeProvider.otherwise({redirectTo: '/view1'}); }]); var uiClasses = angular.module('myApp.uiClasses', []); var myServices = angular.module('myApp.services', []); でディレクティブコードを更新しますファイル、プリロードコードを削除し、代わりにサービスを使用します。

UIエレメントファクトリの作成

ゲーム開発でスプライトを再利用して繰り返すことは非常に重要です。 UIクラス（この場合はスプライト）のインスタンス化を有効にするために、AngularJSファクトリを使用します。

Factoryは、他のAngularJSモジュールと同じようにアプリケーションに登録されます。 uiClassesファクトリを作成するには、app.jsファイルを次のように変更します。

新しいファクトリを使用して、空、丘、地面、およびランナーを作成しましょう。これを行うには、以下にリストされているJavaScriptファイルを作成します。

• app / view1 / uiClasses / sky.js

• app / view1 / uiClasses / hill.js

• app / view1 / Ground.js

• app / view1 / uiClasses / character.js

これらすべての新しいJSファイルをuiClassesに追加することを忘れないでください。

次に、ゲームディレクティブを更新する必要があります。

handleComplete()を移動することに注意してくださいディレクティブから、ディレクティブのサイズが91行から65行に20％減少しました。

さらに、ファクトリクラスごとに個別にテストを記述して、メンテナンスを簡素化できます。

注：テストはこの投稿では取り上げられていないトピックですが、 ここに 始めるのに良い場所です。

化粧品業界の規模

矢印キーの相互作用

HTML5 Canvasゲームチュートリアルのこの時点で、携帯電話をマウスでクリックまたはタップすると、男がジャンプし、彼を止めることはできません。矢印キーコントロールを追加しましょう：

• 左矢印（ゲームを一時停止）
• 上矢印（ジャンプ）
• 右矢印（実行開始）

これを行うには、function keydown(event) { if (event.keyCode === 38) {//if keyCode is 'Up' handleJumpStart(); } if (event.keyCode === 39) {//if keyCode is 'Right' if (scope.status === 'paused') { createjs.Ticker.addEventListener('tick', tick); scope.status = 'running'; } } if (event.keyCode === 37) {//if keyCode is 'Left' createjs.Ticker.removeEventListener('tick', tick); scope.status = 'paused'; } } window.onkeydown = keydown; を作成します関数を作成し、loadQueueの最後の行としてイベントリスナーを追加します関数。

ゲームをもう一度実行して、キーボードコントロールを確認してください。

音楽を再生しましょう

ゲームは音楽なしでは楽しくないので、音楽をかけてみましょう。

まず、MP3ファイルをapp / assetsフォルダーに追加する必要があります。以下のURLからダウンロードできます。

• app / assets / jump.mp3
• app / assets / runningTrack.mp3

次に、ローダーサービスを使用してこれらのサウンドファイルをプリロードする必要があります。 app/view1/services/loaderSvc.jsを使用しますのmyServices.service('loaderSvc', function () { var manifest = [ {src: 'spritesheet_grant.png', id: 'grant'}, {src: 'sky.png', id: 'sky'}, {src: 'ground.png', id: 'ground'}, {src: 'hill1.png', id: 'hill'}, {src: 'hill2.png', id: 'hill2'}, {src: 'runningTrack.mp3', id: 'runningSound'}, {src: 'jump.mp3', id: 'jumpingSound'} ], loader = new createjs.LoadQueue(true); // need this so it doesn't default to Web Audio createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]); loader.installPlugin(createjs.Sound); this.getResult = function (asset) { return loader.getResult(asset); }; this.getLoader = function () { return loader; }; this.loadAssets = function () { loader.loadManifest(manifest, true, '/app/assets/'); }; }); 図書館。 myDirectives.directive('spriteSheetRunner', [ 'loaderSvc', 'Sky', 'Ground', 'Hill', 'Character', function (loaderSvc, Sky, Ground, Hill, Character) { 'use strict'; return { restrict : 'EAC', replace : true, scope :{ }, template: '', link: function (scope, element, attribute) { var w, h, sky, grant, ground, hill, hill2, runningSoundInstance, status; drawGame(); function drawGame() { //drawing the game canvas from scratch here if (scope.stage) { scope.stage.autoClear = true; scope.stage.removeAllChildren(); scope.stage.update(); } else { scope.stage = new createjs.Stage(element[0]); } w = scope.stage.canvas.width; h = scope.stage.canvas.height; loaderSvc.getLoader().addEventListener('complete', handleComplete); loaderSvc.loadAssets(); } function handleComplete() { sky = new Sky({width:w, height:h}); sky.addToStage(scope.stage); ground = new Ground({width:w, height:h}); hill = new Hill({width:w, height:h, scaleFactor: 4, assetName: 'hill', groundHeight: ground.getHeight()}); hill.setAlpha(0.5); hill.addToStage(scope.stage); hill2 = new Hill({width:w, height:h, scaleFactor: 3, assetName: 'hill2', groundHeight: ground.getHeight()}); hill2.addToStage(scope.stage); ground.addToStage(scope.stage); grant = new Character({characterAssetName: 'grant', y: 34}); grant.addToStage(scope.stage); scope.stage.addEventListener('stagemousedown', handleJumpStart); createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener('tick', tick); // start playing the running sound looping indefinitely runningSoundInstance = createjs.Sound.play('runningSound', {loop: -1}); scope.status = 'running'; window.onkeydown = keydown; } function keydown(event) { if (event.keyCode === 38) {//if keyCode is 'Up' handleJumpStart(); } if (event.keyCode === 39) {//if keyCode is 'Right' if (scope.status === 'paused') { createjs.Ticker.addEventListener('tick', tick); runningSoundInstance = createjs.Sound.play('runningSound', {loop: -1}); scope.status = 'running'; } } if (event.keyCode === 37) {//if keyCode is 'Left' createjs.Ticker.removeEventListener('tick', tick); createjs.Sound.stop(); scope.status = 'paused'; } } function handleJumpStart() { if (scope.status === 'running') { createjs.Sound.play('jumpingSound'); grant.playAnimation('jump'); } } function tick(event) { var deltaS = event.delta / 1000; var position = grant.getX() + 150 * deltaS; grant.setX((position >= w + grant.getWidth()) ? -grant.getWidth() : position); ground.setX((ground.getX() - deltaS * 150) % ground.getTileWidth()); hill.move(deltaS * -30, 0); if (hill.getX() + hill.getImageWidth() * hill.getScaleX() <= 0) { hill.setX(w); } hill2.move(deltaS * -45, 0); if (hill2.getX() + hill2.getImageWidth() * hill2.getScaleX() <= 0) { hill2.setX(w); } scope.stage.update(event); } } } }]); を更新しますこれらのファイルをプリロードします。

ゲームディレクティブを変更して、ゲームイベントでサウンドを再生します。

スコアとライフインジケーターの追加

ゲームのスコアとライフ（ハート）インジケーターをHTML5Canvasゲームに追加しましょう。スコアは左上隅に数字で表示され、右上隅にあるハート記号はライフカウントを示します。

ハートのレンダリングには外部フォントライブラリを使用するため、

Score: {{score}}

Life: 1' class='fa fa-heart'> 2' class='fa fa-heart'> .top-left { position: absolute; left: 30px; top: 10px; } .top-right { position: absolute; right: 100px; top: 10px; float: right; } に追加しますファイル：

lifesCount

インジケーターを適切に配置するには、app/view1/view1.jsに左上と右上のCSSクラスを追加する必要があります。ファイル。

'use strict'; angular.module('myApp.view1', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'view1/view1.html', controller: 'View1Ctrl' }); }]) .controller('View1Ctrl', ['$scope', function($scope) { $scope.score = 0; $scope.lifesCount = 3; }]);

スコアを初期化し、... replace : true, scope :{ score: '=score', lifesCount: '=lifesCount' }, template: ... handleComplete()の変数コントローラ。

scope.score = 10; scope.lifesCount = 2; scope.$apply();

インジケーターが適切に更新されるようにするには、スコープ変数を使用するようにメインのゲームディレクティブを変更します。

app/view1/view1.js

スコープバインディングをテストするには、$windowの最後にこれらの3行を追加します。方法。

'use strict'; angular.module('myApp.view1', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'view1/view1.html', controller: 'View1Ctrl' }); }]) .controller('View1Ctrl', ['$scope', '$window', function($scope, $window) { $scope.windowWidth = $window.innerWidth; $scope.gameHeight = 400; $scope.score = 0; $scope.lifesCount = 3; }]);

アプリケーションを実行すると、スコアと寿命のインジケーターが表示されます。

HTML5ゲームプログラミングチュートリアルのこの時点ではまだゲームの幅と高さをハードコーディングしているため、ページの右側に追加の空白が引き続き表示されます。

ゲーム幅の調整

AngularJSには便利なメソッドとサービスが満載です。それらの1つは$ windowで、これは要素の位置を計算するために使用するinnerWidthプロパティを提供します。

... scope :{ width: '=width', height: '=height', score: '=score', lifesCount: '=lifesCount' }, ... drawGame(); element[0].width = scope.width; element[0].height = scope.height; w = scope.width; h = scope.height; function drawGame() { ... を変更します注入する

|_+_|

サービス。

|_+_|

メインのゲームディレクティブをwidthプロパティとheightプロパティで拡張すれば、それだけです。

|_+_|

これで、ゲームがブラウザウィンドウの幅に合わせて調整されました。

これをモバイルアプリに移植したい場合は、他のモバイルアプリ開発チュートリアルを読むことをお勧めします。 Ionicフレームワークを使用してモバイルアプリを作成する 。イオンシードアプリを作成し、このプロジェクトからすべてのコードをコピーして、1時間以内にモバイルデバイスでゲームを開始できるはずです。

ここで取り上げていないのは、衝突検出だけです。それについてもっと学ぶために、私は読んだ この記事 。

要約

このゲーム開発チュートリアルの過程で、あなたは次のことに気づいたと思います。 AngularJS とCreateJSは、HTML5ベースのゲーム開発で勝利を収めたデュオです。あなたはすべての基本を持っており、これら2つのプラットフォームを組み合わせることの利点を認識していると確信しています。

この記事のコードはからダウンロードできます GitHub 、自由に使用、共有、そしてあなた自身のものにしてください。

Photoshopでフォントを作成する方法

関連： 開発者が犯す最も一般的なAngularJSの間違いトップ18