enchant.jsでお手軽ゲーム作成

enchant.jsでお手軽ゲーム作成 OSC Nagoya 2018 Sat. 19th May 甘党の人

自己紹介某大学大学院の学生情報系の専攻に所属 UNIX/Linux系OS初心者一応macOS, Ubuntu, FreeBSDユーザ C, Perl, PHP,
JavaScript, シェルスクリプト初心者 Twitter: @azuki_eater アイコンの人形はFree Penguin Projectの型紙を利用して作成

enchant.js とはゲーム作成に特化したJavaScriptライブラリ canvasを利用 (古いバージョンではDOM操作) GitHubにソースコードが存在開発止まってるっぽい…?

enchant.js の導入公式チュートリアルを参照 enchant.js 利用の雛形 1.enchant.jsをロードしたら enchant() を実行 2.Game オブジェクトを生成
3.game.onload にゲームの処理を記述 4.game.start() を実行 enchant(); window.onload = function() { var game = new Game(WIDTH, HEIGHT); game.onload = function() { // write code... }; game.start(); }

enchant.js の主要なオブジェクト Game オブジェクト Scene オブジェクト Sprite オブジェクト Label オブジェクト
Map オブジェクト詳細は公式ドキュメントを参照

Game オブジェクトゲームを管理するオブジェクトゲームの開始・終了や画面遷移の制御 rootScene というオブジェクトを保持初期画面みたいなもの

Scene オブジェクト画面表示を制御するオブジェクト画像やテキストなどを載せる画面みたいなもの addChild()で描画するオブジェクトを画面に追加複数のSceneで画面を構成することも可能スタックで管理

Sprite オブジェクト画像を扱うオブジェクト画像を埋め込むためにはGameオブジェクトのpreload()を起動 2つの画像の衝突判定も可能 intersect()やwithin()を起動

Label オブジェクト文字列を描画するオブジェクト文字列中の<br>は改行として扱われる

Map オブジェクト平面のマップを扱うオブジェクト RPGツクールみたいなフィールドが作成可能マップ用の画像(タイルセット)が必要衝突判定も可能 hitTest()を起動

enchant.js を用いたゲームの試作タイトル: GarbageCollector (http://azuki-penguin.org/games/GarbageCollector) ゴミ収集車をカーソルキーで操作してゴミを回収 GitHub: https://github.com/azuki-penguin/GarbageCollector GCになってみたい人向け…? 実装はかなり手抜き
操作性がかなり悪い(本人談)

enchant.js を利用した所感 Electronでネイティブ環境に移植したら面白そう RPGツクールのマルチ環境版自作ゲームの実況動画 (誰か投稿してくださいw) プログラミング教育への応用基礎的なプログラミングを学んだ後の発展として

総括 enchant.js の簡単な紹介簡易的な導入 (主要オブジェクトの紹介) enchant.js を利用したゲームの試作試作ゲーム: GarbageCollector

enchant.jsでお手軽ゲーム作成

enchant.jsでお手軽ゲーム作成

SAW

More Decks by SAW

Other Decks in Programming

Featured

Transcript