Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
enchant.jsでお手軽ゲーム作成
Search
SAW
May 19, 2018
Programming
0
100
enchant.jsでお手軽ゲーム作成
2018/5/19のOSC NagoyaでのLTで使用したスライドです。
SAW
May 19, 2018
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
320
EditorConfig を使ってみよう
azuki
1
64
Symfony でサクッと作る REST API サーバー
azuki
1
120
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
150
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
250
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
130
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
350
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
290
Eloquent で relation を扱う基礎
azuki
0
160
Other Decks in Programming
See All in Programming
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
750
Use Perl as Better Shell Script
karupanerura
0
690
「兵法」から見る質とスピード
ickx
0
260
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
760
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
300
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
150
TypeScript LSP の今までとこれから
quramy
1
500
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
590
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Select API from Kotlin Coroutine
jmatsu
1
110
エラーって何種類あるの?
kajitack
5
140
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Being A Developer After 40
akosma
90
590k
Statistics for Hackers
jakevdp
799
220k
4 Signs Your Business is Dying
shpigford
184
22k
Typedesign – Prime Four
hannesfritz
42
2.7k
A designer walks into a library…
pauljervisheath
206
24k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
Designing Experiences People Love
moore
142
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
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