Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン

TECHNOMOBILE
GROUP
HEAD OFFICE
TOKUSHIMA development section
| 5floor Column Minamiaoyama,7-1-5,Minamiaoyama,Minato-ku,Tokyo 107-0062,Japan
| 3floor Tokushimakenkohkagaku-center,Hiraishisumiyoshi,Kawauchi-cho,Tokushima-shi Tokushima 771-0134,Japan
JavaScriptでつくるはじめてのiPhone＆Androidゲームアプリ開発ハンズオン
せっかくJavaScriptを覚えたのだからゲームを作りたいよね。

2
プログラミングを覚えようとした理由は何で
すか
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
６
・ものを作ることが好きだから？
・職業として将来性があるから？
・儲かるから？

3
ゲームを作りたくて覚えた人も多いのでは
６
・ゲームを作ってみたい！！

4
ゲームを作るならiPhoneAndroidゲームで
すよね
６
・課金ユーザが多いって聞く
・iPhoneはAndroidよりレビューさ
れそう

5
作る環境はどれがいいの？
６
・Swift AndroidStudio
・Unity
・Cocos2d-ｘ
将来的にはAndroidゲームも作りた
い

6
JavaScriptならデザイナーでもわかるよね
６
JavaScriptならプログラミングでき
そう
そんなゲーム開発環境は？
Cocos2d-JS

7
Cocos2d-JSとは
６
・JavaScriptで作るゲームエンジン
・Web＆iPhone＆Androidのアプリが作れる。
ソースコードは１つ。
・物理演算のライブラリーも組み込み可能
（AngryBirdとかつくれる）
・Cocos2d-xとほぼ同じクラスなのでパ
フォーマンスが不満であれば移行しやすい
・Webで動作確認するので効率が良い

8
どんなゲームが作れるの？
６
http://www.cocos2d-x.org/wiki/MoonWarriors_-_Cocos2d-JS_Showcase

9
「まずはCocos2d-JSをインストールしましょう」のページを実行して、Python
をインストール済み、cocos2d-JSをダウンロード済みにしておいてください。
iPhone,Androidの実機で動作させたい人は「実機iPhoneで動かそう」「Android
で動かすには？」を参考に環境を作っておいてください。→かなり敷居は高いで
す。
６
事前準備

10
６
この学びの対象者は？
→JavaScriptがなんとなくわかる人でゲー
ム開発したい初心者
Macでも開発可能ですが今回はWindowsを
使います。ターミナルの操作が少し必要で
す。
教えないことは？
→ばりばりのCocos2dプログラマーではな
いので深い知識はありません。難しい質問
はしないで。

11
講師
Gashfara,Inc.代表
デジタルハリウッド大学院客員講師
茂木健一
mogi@gashfara.com
kenichi.mogi@tcmobile.jp
http://facebook.com/mogiken
http://www.slideshare.net/mogiken1
自己紹介
[プロフィール/実績]
もぎ・けんいち●青山学院大学大学院卒。Gashfara,Inc.代表。本社はハワイですが出社したことなし。
ホノルルマラソンには参加ｗ
青山学院大学大学院卒：エニックスでオリジナルゲーム制作(Z80アセンブラ CP/M)、SmallTalkで
人工知能開発（企業買収）。
（株）東洋情報システム退社後、（株）エイチアイ、グランスフィア（株）、（株）ファッション
ウォーカー（えびもえのEC）など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファ
ラ・インクをUSで起業。システム開発ではゲーム、TOL（ツタヤオンライン）の立ち上げ。動画配
信システム(USENのGate01：Gyaoの前進)、電子マネーシステム（Bitcash）、ECフルフィルメント
システムなど、多彩な分野を経験。IT関連教育では1998年ころからデジハリの２．５階に間借りしな
がら教育コンテンツ作成（JIB社）。Brew、Java、セキュリティーなどの講師として活躍。現在、
（株）HUGGを設立し、スマホのカップル向けSNSサービス[HUGG]をグローバルに展開。㈱テクノ
モバイルにて技術サポート。
【著書】
BREWプログラミング実践バイブル [共著] （インプレス）、PHP逆引き大全 516の極意[共著]（秀和
システム）

12
成長を実現させるシステム”モバイルトータルソリュー
ション”
Web
システム
１
スマホ
アプリ
2 ゲーム
アプリ
3
モバイルトータルソリューション
B2B2C
• コンシューマ向けの大規模Webシステムの開発からアプリ・ゲーム開発までをマルチデバイスで対応
高い技術力市場ニーズとマッチ
大規模
Webシステム
に強い
Java,PHP
Strong1
最先端技術・独自
フレームワークで
効率的な
開発
Strong2
高トラフィック、
インフラ
ネットワーク
に強い
Strong3 プライマリー
ベンダー、
ヒアリング・
要件定義
に強い
StrongⅠ
情報資産の活用
最先端と
知見に強い
StrongⅡ
最先端のマルチ
デバイス
ウェアラブルに
強い
StrongⅢ
Mashup Awards 5年連続受賞
会社名株式会社テクノモバイル
設立 2008年
資本金 2,500万円
代表播田誠
従業員数 100名（グループ合計）
本社所在地
〒 107-0062
東京都港区南青山7-1-5 コラム南青山 5F
開発室
〒771-0134
徳島県徳島市川内町平石住吉209-5
徳島健康科学総合センター 3F

13
どんなゲームを作るの？
６
背景とサンゴが横スクロール。
魚がサンゴに衝突しないようにタップしながら避けていくゲーム。
いわゆるFlappyゲーム。

14
まずはCocos2d-JSをインストールしま
しょう
６
●Macの場合：
必要な環境
Macとpython2.7(Macにはインストール済み)
windowsでもpython2.7がインストールしてあれば動作します。
ダウンロード
http://www.cocos2d-x.org/download からcocos2d-JSをダウンロードして適当
なフォルダーに解凍してください。現在はCocos2d-xに統合されています。

15
６
●Windowsの場合：
ここを参考にインストールと動作確認をお願いします。Pythonの環境が必要で
す。
https://goo.gl/9RNrbT

16
６
ターミナルを開いて展開したフォルダーに移動してください。MacもWindowsも
おなじかんじ。
mogi$ cd /Users/mogi/Documents/業務/テクノ/cocos2d-js/cocos2d-js-v3.6
インストール（環境設定)
自分のフォルダーに変更してください
フォルダーのパスは、フォルダーをターミナルにドラッグ＆ドロップするだけで
取得できます。

17
６
ターミナルで ./setup.py を実行してください。質問が幾つかされますがAndroidの設定
なのでEnterを押してスキップしてください。あとからAndroidの設定を行います。
mogi$ ./setup.py Windowsでは”python setup.py”
Setting up cocos2d-x...
->Check environment variable COCOS_CONSOLE_ROOT
->Find environment variable COCOS_CONSOLE_ROOT...
->COCOS_CONSOLE_ROOT is found : /Users/mogi/Documents/業務/テクノ/cocos2d-js/cocos2d-js-v3.5/tools/cocos2d-console/bin
->Update variable COCOS_CONSOLE_ROOT in files ['.bash_profile', '.bash_login', '.profile']
->File /Users/mogi/.bash_profile updated!
->Configuration for Android platform only, you can also skip and manually edit "/Users/mogi/.bash_profile"
->Check environment variable NDK_ROOT
->Find environment variable NDK_ROOT...
->NDK_ROOT not found
->Please enter the path of NDK_ROOT (or press Enter to skip):
->Check environment variable ANDROID_SDK_ROOT
->Find environment variable ANDROID_SDK_ROOT...
->ANDROID_SDK_ROOT not found
->Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):
->Check environment variable ANT_ROOT
->Find environment variable ANT_ROOT...
->ANT_ROOT not found
->Find command ant in system...
->Command ant not found
->Please enter the path of ANT_ROOT (or press Enter to skip):
Please execute command: "source /Users/mogi/.bash_profile" to make added system variables take effect
Mogi-no-MacBook-Gold:cocos2d-js-v3.6 mogi$

18
６
Mac:
setup.pyを実行すると、~/.bash_profileの値が書き変わるので読み直します。
ターミナルで . ~/.bash_profile を実行してください。
mogi$ . ~/.bash_profile
Windows:
コマンドプロンプトを閉じて、新しいコマンドプロンプトで先ほどのcocos2d-js-vXXXの
フォルダーに移動します。cdコマンド。

19
今回のプロジェクトを作成しましょう
６
1つのゲームに１つのプロジェクトが必要です。フォルダーが作成されます。
ターミナルを開いてプロジェクトを作成したいフォルダーに移動してください。
mogi$ cd /Users/mogi/Documents/業務/テクノ/cocos2d-js
自分のフォルダーに変更してください
ターミナルで下記のコマンドを実行するとmyFishというプロジェクトフォル
ダーが作成されます。
mogi$ cocos new myFish -l js

20
とりあえず動かそう
６
ターミナルで下記のコマンドを実行し、pythonのWebサーバーを起動します。
mogi$ cd myFish
mogi$ python -m SimpleHTTPServer
ブラウザで http://localhost:8000/ にアクセスするとデフォルトのアプリ
myFishが動作します。
ここにあるファイルを編集してゲームを作っていき
ます。

21
ファイル構成
６
①起動時の設定。画面サイズとか
②画像や音はresに置きます。
③resurce.jsはresのファイルを管理
app.jsがゲームのメインプログラム
これらのファイルだけを編集するだけです。

22
ファイルを差し替えましょう
６
https://goo.gl/8Bv2hn
下記からファイルをダウンロード解凍し、
main.js,resource.js,app.jsファイルはそれぞれ
を上書き。pngとmp3ファイルはresフォル
ダーにコピーしてください。

23
動かそう
６
ふたたびブラウザで http://localhost:8000/ にアクセスするとアプリmyFishが
動作します。
マウスクリックすると魚が浮かびます。サンゴを避けましょ
う。

24
デバッグするには？
６
ChromeのJavaScriptコンソールを使います。コンソール使用中のキャッシュは
Offに設定！

25
画面のキーワード(シーン・レイヤー・ス
プライト)
６
シーン（画面）レイヤー画像（スプライト）
音
ラベル
メニュー
表示フレームごとに処理が可能
ここで移動させることでスクロールなどの動きを実現

26
どう考えれば作れるのか？
フレームワークを理解
６
main.js
①アプリ起動時の処理
ほぼ毎回同じプログラム
resource.js
②画像、音などのリソース管理
リソースファイル名を登録
app.js
③メインプログラム（ゲームごとに異なる）
③−１レイヤー初期化（必要な物を表示：タッチ可能にす
る）
③−１−０変数を初期化（リスタートのため）
③−１−１画面に表示するものを配置
③ー１−２BGMを再生
③−１−３タッチイベントを有効にする
③−１−４フレームごとに実行することを有効にする
③−２フレームごとの処理(変化するものを処理)
③−２−１背景・サンゴのスクロール
③−２−２自機の表示
③−２−3点数の表示
③−２−4衝突判定 → ゲームオーバー処理実行

27
６
③−３タッチした時の処理(タッチの処理)
③−３−１効果音
③−３−2上昇（表示はしない）
③−３−3上昇アニメーション
③−４ゲームオーバー処理(主に初期化で実行したことをやめる)
③−４−１BGM停止
③−４−２フレームごとに実行することを無効にする
③−４−３タッチイベントを無効にする
③−４−４リトライボタンを表示→押したらリトライ
処理
③−５リトライ処理
③−５−１新しくシーンを作成
③−６シーンの作成処理

28
フレームワークに合わせてプログラム
説明
６

29
iPhoneで動作確認するには？
６
xcodeprojファイルが用意されてい
るので、これをXcodeで開いてビル
ドすればOK。

30
まずはXcodeをインストールしましょう
６
XcodeとはiPhoneの開発をするため
のアプリです。無償で使えます。
Macで動作します。Windowsでは使
えません。
ここを参考にXcodeをインストール
してください。簡単です。
http://www.atmarkit.co.jp/ait/articles/1410/02/news031_2.html

31
実機iPhoneで動かそう
６
iOS Developer Programへの登録と実機での動作
http://goo.gl/f2dh3y
実機で動かすには費用が。。必要です。勉強代！！ー＞今は
不要にんったみたい
ここを参考に登録して実機で動かしましょう。[実機でのア
プリの実行]の節をまねすればOK.

32
６
うまく行けば、シミュレータの代わりに自分のiPhoneが選
択できるようになります。あとは再生ボタンを押せば実機に
アプリが転送され実行できるようになります。
※最初のビルドには30分くらいかかりますorz
myFish/frameworks/runtime-src/proj.ios_mac/myFish.xcodeproj
をXcodeで開きます。

33
ここを参考に！
AndroidSDKはAndroidStudioをインストールすれば入ってい
ます。
Androidで動かすには？
６
http://qiita.com/turusuke/items/741267bbfc81a287438a
・NDK,ANTをDownloadして解凍
・export設定を追加(setup.pyの実行でも設定される)環境変
数が変わるのでターミナルやコマンドプロンプトは新規に開
く※
・USBケーブルでAndroid端末を接続(Developer環境にして
おく)。
・cocos run -p android でbuildしてインストール
SDKのAPIのエラーが出るときは
cocos run –-ap android-19 -p android のようにAPIフォルダーを指定。
※私のWinodws環境設定例。python setup.pyで設定。
NDK_ROOT = D:android-ndk-r13b
ANDROID_SDK_ROOT = D:AndroidSdk
ANT_ROOT = D:apache-ant-1.10.1bin binなので注意

34
もっとプログラムを学ぶには？
６
http://goo.gl/zSpb9B
cocos2d-jsを初心者向けに解説。バージョンが古い。3.xに
変換する必要がある。
APIマニュアルv3.6
http://www.cocos2d-x.org/reference/html5-js/V3.6/index.html
3.xへの変換はここを参考
http://qiita.com/nise_nabe/items/98cf59caa6de6b1efd7a
http://goo.gl/64m9Dz
こっちのほうが新しい

35
６
・プログラマーのゲーム作成スキル向上
・ゲーム開発コストの削減
・デザイナーのスキル向上
適用事例（経営者・営業担当の方に）

Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン

Similar to Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン (20)

More from 健一茂木

More from 健一茂木 (12)