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
82
enchant.jsでお手軽ゲーム作成
2018/5/19のOSC NagoyaでのLTで使用したスライドです。
SAW
May 19, 2018
Tweet
Share
More Decks by SAW
See All by SAW
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
32
GraphQL 入門
azuki
1
51
JavaScript で音声認識を試してみよう
azuki
0
28
Voice Recognition in JavaScript
azuki
0
15
Nuxt で GraphQL のクエリを送信する方法
azuki
2
80
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
61
Postman で GraphQL のクエリを送ってみよう
azuki
0
250
Laravel でモデルの ID を UUID/ULID にする方法
azuki
0
180
Vue ユーザーが Svelte に⼊⾨してみた
azuki
1
300
Other Decks in Programming
See All in Programming
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
新宿ダンジョンを可視化してみた
satoshi7190
2
230
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Front-end application development, Symfony-style(s)
dunglas
2
2k
Ruby GitHub Packages
bkuhlmann
0
630
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
雑に思考を整理する技術と効能
konifar
58
29k
PHPはいつから死んでいるかの調査
chiroruxx
1
380
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Debugging Ruby Performance
tmm1
70
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Code Reviewing Like a Champion
maltzj
514
39k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
In The Pink: A Labor of Love
frogandcode
138
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
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