![Page 1: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/1.jpg)
UEI/ARC伏見 遼平
enchant.js でゲームを作るコツ
![Page 2: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/2.jpg)
自己紹介
伏見 遼平
(株)ユビキタスエンターテイメント秋葉原リサーチセンター (UEI/ARC)9leap プロジェクトリーダー
![Page 3: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/3.jpg)
様々な試練をくぐり抜けてきました
• 48時間で20本のゲームを作る
• 24時間で10本のTwitter連携ゲームを作る
• 16時間で21本のゲームを作る
• 8時間でMMOを作る
![Page 4: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/4.jpg)
ゲーム作りにはプログラミング以外にも要求されることが多い
気づいたこと:
![Page 5: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/5.jpg)
ゲームを作るコツをお伝えします
![Page 6: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/6.jpg)
プログラマのためのゲームデザイン入門
![Page 7: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/7.jpg)
• ハッカソンで優勝できる(?)
• 普段のゲーム作りにも生かせる
このセッションの目的
• 短い時間で
• テーマに沿ったゲームの
• 骨組みを作るコツ
![Page 8: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/8.jpg)
対象聴講者:
ゲームを作ったことがないすべての方々
![Page 9: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/9.jpg)
• プロトタイピングはなぜ大切か
• ゲーム開発の「20%ルール」
• プロトタイピングのコツ
• ストレスコントロール
• ゲームの3要素
• テストプレイとは
• ストレス曲線を描く
レジュメ
![Page 10: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/10.jpg)
プロトタイピングPrototyping
![Page 11: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/11.jpg)
プロトタイピングPrototyping
• 遊べる状態まで完成させること
• UIやグラフィックやキャラクターは仮組みで良い
• 「おもしろい」かどうか判定できる最低限の状態
![Page 12: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/12.jpg)
20%ルール
![Page 13: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/13.jpg)
20%ルール
![Page 14: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/14.jpg)
名作と呼ばれるゲームを生み出したチームのほとんどは、
開発期間のうちおよそ20%の時間でプレイアブル・デモを完成させ、
残りの時間はその改善に当てている
“Rules Of Play” - Eric Zimmerman
![Page 15: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/15.jpg)
![Page 16: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/16.jpg)
5ヶ月の
プロジェクト
48時間の
ゲームジャム
1週間の
プロジェクト
1ヶ月でプロトタイプ完成!
1日でプロトタイプ完成!
10時間でプロトタイプ完成!
テストプレイ期間
テストプレイ期間
テストプレイ期間
![Page 17: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/17.jpg)
90分の
ハッカソン
20分でプロトタイプ完成!?
9分のコーディングバトル
2分でプロトタイプ完成!?
テストプレイ期間
テストプレイ期間
![Page 18: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/18.jpg)
45分でプロトタイプ完成(目標)
完成品 = プロトタイプ
テストプレイ期間90分の
ハッカソン
9分のコーディングバトル
![Page 19: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/19.jpg)
90分のバトル
実際のゲーム開発の初期工程(プロトタイピング+テストプレイ)
取り出したもの
![Page 20: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/20.jpg)
では、どうやってプロトタイプを作るのか?
![Page 21: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/21.jpg)
主人公を決める
ストレスの与え方を決める
ゲームの目標を作る
では、どうやってプロトタイプを作るのか?
![Page 22: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/22.jpg)
ストレス(緊張)
時間
![Page 23: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/23.jpg)
ストレス(緊張)
時間
![Page 24: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/24.jpg)
ストレス(緊張)
時間
![Page 25: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/25.jpg)
ストレス(緊張)
時間
クリア
![Page 26: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/26.jpg)
![Page 27: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/27.jpg)
ストレス(緊張)
時間
![Page 28: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/28.jpg)
![Page 29: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/29.jpg)
Super Mario Bros. WORLD 1-1
ゲームデザインの教科書
![Page 30: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/30.jpg)
• ざっくり描いておいてあとで直せるように
• 初めてのストレスはできるだけ簡単に
![Page 31: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/31.jpg)
ゲームデザインとは?↓
プレイヤーのストレスと快感をうまくコントロールすること
![Page 32: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/32.jpg)
参考文献
![Page 33: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/33.jpg)
• 実際にゲームを作るには?
![Page 34: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/34.jpg)
• 実際にゲームを作るには?
• テーマに沿ったゲーム
• 短い時間で骨格を作ろう
![Page 35: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/35.jpg)
主人公を決める
ストレスの与え方を決める
ゲームの目標を作る
![Page 36: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/36.jpg)
• 主人公 = 中心にするモノを考える
• チーズバーガー
• 宇宙服を着たクマ
• 丸くて膨らむもの
• 走るクルマ
![Page 37: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/37.jpg)
• ストレッサーを決める
• チーズバーガー
• 宇宙服を着たクマ
• 丸くて膨らむもの
• 走るクルマ
• 積み上げたバーガーが崩れる
• クマが隕石にぶつかる
• 膨らんだものが破裂する
• クルマがクラッシュする
![Page 38: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/38.jpg)
• ゲームの目標を決める
• 必ずしも数値でなくとも良い
• チーズバーガー
• 宇宙服を着たクマ
• 丸くて膨らむもの
• 走るクルマ
• 積み上げたバーガーが崩れる
• クマが隕石にぶつかる
• 膨らんだものが破裂する
• クルマがクラッシュする
• 積んだバーガーの個数
• 生き残った時間
• ふくらませた数
• ラップタイム
![Page 39: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/39.jpg)
主人公を決める
ストレスの与え方を決める
ゲームの目標を作る
![Page 40: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/40.jpg)
重要なのはストレッサーのデザイン
まずはパクる
![Page 41: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/41.jpg)
Pong
アーケードゲームの元祖
Tennis for Two
![Page 42: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/42.jpg)
XEVIOUS
怒首領蜂
東方Project
![Page 43: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/43.jpg)
オリジナリティは作っているうちに生まれる
![Page 44: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/44.jpg)
Q. 45分でプロトタイプが完成しませんA. 45分で完成するプロトタイプを作ろう
![Page 45: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/45.jpg)
プロトタイプができた!
テストプレイ
![Page 46: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/46.jpg)
テストプレイとは
• ストレス曲線の修正作業
![Page 47: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/47.jpg)
ストレス(緊張)
時間
耐えられるストレス量
![Page 48: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/48.jpg)
ストレス(緊張)
時間
慣れてくると増える
![Page 49: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/49.jpg)
ストレス(緊張)
時間
ゲームオーバー
![Page 50: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/50.jpg)
ストレス(緊張)
時間
クリア!
![Page 51: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/51.jpg)
• 比較的簡単
• シューティングゲーム
• アクションゲーム
• 難しい
• パズルゲーム
ストレス曲線の修正が…
![Page 54: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/54.jpg)
まとめ
• 20%ルール (プロトタイピング)
• ストレスコントロール
• 主人公・ストレス・目標
![Page 55: enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」](https://reader033.vdocuments.site/reader033/viewer/2022050613/588614411a28abe63e8b5e17/html5/thumbnails/55.jpg)
• おわりです