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
560
EditorConfig を使ってみよう
azuki
1
78
Symfony でサクッと作る REST API サーバー
azuki
1
160
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
190
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
300
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
320
Eloquent で relation を扱う基礎
azuki
0
170
Other Decks in Programming
See All in Programming
アセットのコンパイルについて
ojun9
0
120
旅行プランAIエージェント開発の裏側
ippo012
2
890
Design Foundational Data Engineering Observability
sucitw
3
190
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
22
11k
testingを眺める
matumoto
1
140
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
print("Hello, World")
eddie
1
520
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
240
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
220
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Invisible Side of Design
smashingmag
301
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Language of Interfaces
destraynor
161
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Speed Design
sergeychernyshev
32
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A Tale of Four Properties
chriscoyier
160
23k
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