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
340
EditorConfig を使ってみよう
azuki
1
67
Symfony でサクッと作る REST API サーバー
azuki
1
130
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
150
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
260
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
130
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
350
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
300
Eloquent で relation を扱う基礎
azuki
0
160
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
490
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
Select API from Kotlin Coroutine
jmatsu
1
190
XP, Testing and ninja testing
m_seki
3
190
童醫院敏捷轉型的實踐經驗
cclai999
0
190
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
460
VS Code Update for GitHub Copilot
74th
1
390
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Cult of Friendly URLs
andyhume
79
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
What's in a price? How to price your products and services
michaelherold
246
12k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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