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
92
enchant.jsでお手軽ゲーム作成
2018/5/19のOSC NagoyaでのLTで使用したスライドです。
SAW
May 19, 2018
Tweet
Share
More Decks by SAW
See All by SAW
EditorConfig を使ってみよう
azuki
1
30
Symfony でサクッと作る REST API サーバー
azuki
1
43
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
87
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
200
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
110
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
300
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
240
Eloquent で relation を扱う基礎
azuki
0
120
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
97
Other Decks in Programming
See All in Programming
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
color-scheme: light dark; を完全に理解する
uhyo
3
290
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
160
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
150
Rails アプリ地図考 Flush Cut
makicamel
1
120
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Writing documentation can be fun with plugin system
okuramasafumi
0
120
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
Featured
See All Featured
Visualization
eitanlees
146
15k
Done Done
chrislema
182
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Code Review Best Practice
trishagee
67
18k
Designing Experiences People Love
moore
140
23k
Code Reviewing Like a Champion
maltzj
521
39k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
RailsConf 2023
tenderlove
29
1k
Become a Pro
speakerdeck
PRO
26
5.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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