Downloaded 10 times
![11
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
講師
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の極意[共著]（秀和
システム）](https://image.slidesharecdn.com/javascriptiphone-150605085152-lva1-app6892/75/Java-Script-iPhoneAndroid-11-2048.jpg)
![17
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
６
ターミナルで ./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$](https://image.slidesharecdn.com/javascriptiphone-150605085152-lva1-app6892/75/Java-Script-iPhoneAndroid-17-2048.jpg)
![31
実機iPhoneで動かそう
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
６
iOS Developer Programへの登録と実機での動作
http://goo.gl/f2dh3y
実機で動かすには費用が。。必要です。勉強代！！ー＞今は
不要にんったみたい
ここを参考に登録して実機で動かしましょう。[実機でのア
プリの実行]の節をまねすればOK.](https://image.slidesharecdn.com/javascriptiphone-150605085152-lva1-app6892/75/Java-Script-iPhoneAndroid-31-2048.jpg)
Uploaded by健一 茂木
Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン
JavaScriptだけでiPhone,Androidのゲームが作れちゃいます。
More Related Content
Similar to Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン
![[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”](https://cdn.slidesharecdn.com/ss_thumbnails/cedec201409-04-140924054142-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン
- 1. TECHNOMOBILE GROUP HEAD OFFICE TOKUSHIMA developmentsection | 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. 2 プログラミングを覚えようとした理由は何で すか COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ・ものを作ることが好きだから？ ・職業として将来性があるから？ ・儲かるから？
- 3. 3 ゲームを作りたくて覚えた人も多いのでは COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ・ゲームを作ってみたい！！
- 4. 4 ゲームを作るならiPhoneAndroidゲームで すよね COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ・課金ユーザが多いって聞く ・iPhoneはAndroidよりレビューさ れそう
- 5. 5 作る環境はどれがいいの？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ・Swift AndroidStudio ・Unity ・Cocos2d-ｘ 将来的にはAndroidゲームも作りた い
- 6. 6 JavaScriptならデザイナーでもわかるよね COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ JavaScriptならプログラミングでき そう そんなゲーム開発環境は？ Cocos2d-JS
- 7. 7 Cocos2d-JSとは COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ・JavaScriptで作るゲームエンジン ・Web＆iPhone＆Androidのアプリが作れる。 ソースコードは１つ。 ・物理演算のライブラリーも組み込み可能 （AngryBirdとかつくれる） ・Cocos2d-xとほぼ同じクラスなのでパ フォーマンスが不満であれば移行しやすい ・Webで動作確認するので効率が良い
- 8. 8 どんなゲームが作れるの？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ http://www.cocos2d-x.org/wiki/MoonWarriors_-_Cocos2d-JS_Showcase
- 9.
- 10. 10 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ この学びの対象者は？ →JavaScriptがなんとなくわかる人でゲー ム開発したい初心者 Macでも開発可能ですが今回はWindowsを 使います。ターミナルの操作が少し必要で す。 教えないことは？ →ばりばりのCocos2dプログラマーではな いので深い知識はありません。難しい質問 はしないで。
- 11. 11 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. 講師 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. 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. 13 どんなゲームを作るの？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ 背景とサンゴが横スクロール。 魚がサンゴに衝突しないようにタップしながら避けていくゲーム。 いわゆるFlappyゲーム。
- 14. 14 まずはCocos2d-JSをインストールしま しょう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ●Macの場合： 必要な環境 Macとpython2.7(Macにはインストール済み) windowsでもpython2.7がインストールしてあれば動作します。 ダウンロード http://www.cocos2d-x.org/download からcocos2d-JSをダウンロードして適当 なフォルダーに解凍してください。現在はCocos2d-xに統合されています。
- 15. 15 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ●Windowsの場合： ここを参考にインストールと動作確認をお願いします。Pythonの環境が必要で す。 https://goo.gl/9RNrbT
- 16. 16 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ターミナルを開いて展開したフォルダーに移動してください。MacもWindowsも おなじかんじ。 mogi$ cd /Users/mogi/Documents/業務/テクノ/cocos2d-js/cocos2d-js-v3.6 インストール（環境設定) 自分のフォルダーに変更してください フォルダーのパスは、フォルダーをターミナルにドラッグ＆ドロップするだけで 取得できます。
- 17. 17 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ターミナルで ./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. 18 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ Mac: setup.pyを実行すると、~/.bash_profileの値が書き変わるので読み直します。 ターミナルで . ~/.bash_profile を実行してください。 mogi$ . ~/.bash_profile Windows: コマンドプロンプトを閉じて、新しいコマンドプロンプトで先ほどのcocos2d-js-vXXXの フォルダーに移動します。cdコマンド。
- 19. 19 今回のプロジェクトを作成しましょう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ 1つのゲームに１つのプロジェクトが必要です。フォルダーが作成されます。 ターミナルを開いてプロジェクトを作成したいフォルダーに移動してください。 mogi$ cd /Users/mogi/Documents/業務/テクノ/cocos2d-js 自分のフォルダーに変更してください ターミナルで下記のコマンドを実行するとmyFishというプロジェクトフォル ダーが作成されます。 mogi$ cocos new myFish -l js
- 20. 20 とりあえず動かそう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ターミナルで下記のコマンドを実行し、pythonのWebサーバーを起動します。 mogi$ cd myFish mogi$ python -m SimpleHTTPServer ブラウザで http://localhost:8000/ にアクセスするとデフォルトのアプリ myFishが動作します。 ここにあるファイルを編集してゲームを作っていき ます。
- 21. 21 ファイル構成 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ①起動時の設定。画面サイズとか ②画像や音はresに置きます。 ③resurce.jsはresのファイルを管理 app.jsがゲームのメインプログラム これらのファイルだけを編集するだけです。
- 22. 22 ファイルを差し替えましょう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ https://goo.gl/8Bv2hn 下記からファイルをダウンロード解凍し、 main.js,resource.js,app.jsファイルはそれぞれ を上書き。pngとmp3ファイルはresフォル ダーにコピーしてください。
- 23. 23 動かそう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ふたたびブラウザで http://localhost:8000/ にアクセスするとアプリmyFishが 動作します。 マウスクリックすると魚が浮かびます。サンゴを避けましょ う。
- 24. 24 デバッグするには？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ChromeのJavaScriptコンソールを使います。コンソール使用中のキャッシュは Offに設定！
- 25. 25 画面のキーワード(シーン・レイヤー・ス プライト) COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ シーン（画面） レイヤー 画像（スプライト） 音 ラベル メニュー 表示フレームごとに処理が可能 ここで移動させることでスクロールなどの動きを実現
- 26. 26 どう考えれば作れるのか？ フレームワークを理解 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ main.js ①アプリ起動時の処理 ほぼ毎回同じプログラム resource.js ②画像、音などのリソース管理 リソースファイル名を登録 app.js ③メインプログラム（ゲームごとに異なる） ③−１レイヤー初期化（必要な物を表示：タッチ可能にす る） ③−１−０変数を初期化（リスタートのため） ③−１−１画面に表示するものを配置 ③ー１−２BGMを再生 ③−１−３タッチイベントを有効にする ③−１−４フレームごとに実行することを有効にする ③−２フレームごとの処理(変化するものを処理) ③−２−１背景・サンゴのスクロール ③−２−２自機の表示 ③−２−3点数の表示 ③−２−4衝突判定 → ゲームオーバー処理実行
- 27. 27 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ③−３タッチした時の処理(タッチの処理) ③−３−１効果音 ③−３−2上昇（表示はしない） ③−３−3上昇アニメーション ③−４ゲームオーバー処理(主に初期化で実行したことをやめる) ③−４−１BGM停止 ③−４−２フレームごとに実行することを無効にする ③−４−３タッチイベントを無効にする ③−４−４リトライボタンを表示→押したらリトライ 処理 ③−５リトライ処理 ③−５−１新しくシーンを作成 ③−６シーンの作成処理
- 28. 28 フレームワークに合わせてプログラム 説明 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６
- 29. 29 iPhoneで動作確認するには？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ xcodeprojファイルが用意されてい るので、これをXcodeで開いてビル ドすればOK。
- 30. 30 まずはXcodeをインストールしましょう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ XcodeとはiPhoneの開発をするため のアプリです。無償で使えます。 Macで動作します。Windowsでは使 えません。 ここを参考にXcodeをインストール してください。簡単です。 http://www.atmarkit.co.jp/ait/articles/1410/02/news031_2.html
- 31. 31 実機iPhoneで動かそう COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ iOS Developer Programへの登録と実機での動作 http://goo.gl/f2dh3y 実機で動かすには費用が。。必要です。勉強代！！ー＞今は 不要にんったみたい ここを参考に登録して実機で動かしましょう。[実機でのア プリの実行]の節をまねすればOK.
- 32. 32 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ うまく行けば、シミュレータの代わりに自分のiPhoneが選 択できるようになります。あとは再生ボタンを押せば実機に アプリが転送され実行できるようになります。 ※最初のビルドには30分くらいかかりますorz myFish/frameworks/runtime-src/proj.ios_mac/myFish.xcodeproj をXcodeで開きます。
- 33. 33 ここを参考に！ AndroidSDKはAndroidStudioをインストールすれば入ってい ます。 Androidで動かすには？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ 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. 34 もっとプログラムを学ぶには？ COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ 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. 35 COPYRIGHT(C) TECHNOMOBILE ALLRIGHTS RESERVED. ６ ・プログラマーのゲーム作成スキル向上 ・ゲーム開発コストの削減 ・デザイナーのスキル向上 適用事例（経営者・営業担当の方に）