Page 1
TECHNOMOBILEGROUP
HEAD OFFICETOKUSHIMA 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アフリ開発体験
せっかく JavaScriptを覚えたのだからゲームを作りたいよね。
Page 2
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.2
フログラミングを覚えようとした理由は何てすか
6
・ものを作ることが好きだから?・職業として将来性があるから?・儲かるから?
Page 3
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.3
ゲームを作りたくて覚えた人も多いのては
6
・ゲームを作ってみたい!!
Page 4
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.4
ゲームを作るなら iPhoneゲームてすよね
6
・課金ユーザが多いって聞く・ Androidよりレビューされそう
Page 5
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.5
作る環境はどれがいいの?
6
・ Swift・ Unity・ Cocos2d-x
将来的には Androidゲームも作りたい
Page 6
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.6
JavaScriptならデザイナーてもわかるよね
6
JavaScriptならフログラミングてきそうそんなゲーム開発環境は?
Cocos2d-JS
Page 7
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.7
Cocos2d-JSとは
6
・ JavaScriptて作るゲームエンジン・Web& iPhone& Androidのアフリが作れる。ソースコードは1つ。・物理演算のライブラリーも組み込み可能( AngryBirdとかつくれる)・ Cocos2d-xとほぼ同しクラスなのてパフォーマンスが不満てあれば移行しやすい・Webて動作確認するのて効率が良い
Page 8
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.8
どんなゲームが作れるの?
6
http://www.cocos2d-x.org/wiki/MoonWarriors_-_Cocos2d-JS_Showcase
Page 9
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.9
6
この学びの対象者は?→JavaScriptがなんとなくわかる人てゲーム開発したい初心者Windowsても開発可能てすが今回はMacを使います。ターミナルの操作が少し必要てす。Windowsインストール参考 : http://tomoyukim.hatenablog.com/entry/2014/09/12/110627
教えないことは?→ばりばりの Cocos2dフログラマーてはないのて深い知識はありません。難しい質問はしないて。
Page 10
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.10
講師Gashfara,Inc.代表 デジタルハリウッド大学院客員講師茂木健一[email protected] [email protected] http://facebook.com/mogikenhttp://www.slideshare.net/mogiken1
自己紹介[フロフィール /実績 ]もぎ・けんいち●青山学院大学大学院卒。 Gashfara,Inc.代表。本社はハワイてすが出社したことなし。ホノルルマラソンには参加w青山学院大学大学院卒:エニックスてオリジナルゲーム制作 (Z80アセンブラ CP/M)、 SmallTalkて人工知能開発(企業買収)。
(株)東洋情報システム退社後、(株)エイチアイ、グランスフィア(株)、(株)ファッションウォーカー(えびもえの EC)など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファラ・インクを USて起業。システム開発てはゲーム、 TOL(ツタヤオンライン)の立ち上げ。動画配信システム (USENの Gate01: Gyaoの前進 )、電子マネーシステム( Bitcash)、 ECフルフィルメントシステムなど、多彩な分野を経験。 IT関連教育ては 1998年ころからデジハリの2.5階に間借りしながら教育コンテンツ作成( JIB社)。 Brew、 Java、セキュリティーなどの講師として活躍。現在、(株) HUGGを設立し、スマホのカッフル向け SNS サービス [HUGG]をグローバルに展開。㈱テクノモバイルにて技術サポート。
【著書】BREWフログラミング実践バイブル [ 共著 ] (インフレス)、 PHP 逆引き大全 516の極意 [ 共著 ](秀和システム)
Page 11
11
成長を実現させるシステム”モバイルトータルソリューション”
Webシステム
1
スマホアフリ
2 ゲームアフリ
3
モバイルトータルソリューション
B2B2C
コンシューマ向けの大規模 Webシステムの開発からアフリ・ゲーム開発まてをマルチデバイスて対応
Technology 高い技術力 Market 市場ニーズとマッチ
大規模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
Page 12
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.12
どんなゲームを作るの?
6
背景とサンゴが横スクロール。魚がサンゴに衝突しないようにタッフしながら避けていくゲーム。いわゆる Flappyゲーム。
Page 13
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.13
まずは Cocos2d-JSをインストールしましょう
6
必要な環境 Macと python2.7(Macにインストール済み )
ダウンロード http://www.cocos2d-x.org/download から cocos2d-JSをダウンロードして適当なフォルダーに解凍してください。
Page 14
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.14
6
ターミナルを開いて展開したフォルダーに移動してください。 mogi$ cd /Users/mogi/Documents/業務 /テクノ /cocos2d-js/cocos2d-js-v3.6
インストール(環境設定 )
自分のフォルダーに変更してください
フォルダーのパスは、フォルダーをターミナルにドラッグ&ドロッフするだけて取得てきます。
Page 15
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.15
6
ターミナルて ./setup.py を実行してください。質問が幾つかされますが Androidの設定なのて Enterを押してスキッフしてください。
mogi$ ./setup.pySetting 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$
Page 16
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.16
6
setup.pyを実行すると、~/.bash_profileの値が書き変わるのて読み直します。ターミナルて . ~/.bash_profile を実行してください。
mogi$ . ~/.bash_profile
Page 17
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.17
今回のフロジェクトを作成しましょう
6
1つのゲームに1つのフロジェクトが必要てす。フォルダーが作成されます。
ターミナルを開いてフロジェクトを作成したいフォルダーに移動してください。 mogi$ cd /Users/mogi/Documents/業務 /テクノ /cocos2d-js
自分のフォルダーに変更してください
ターミナルて下記のコマンドを実行するとmyFishというフロジェクトフォルダーが作成されます。 mogi$ cocos new myFish -l js
Page 18
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.18
とりあえず動かそう
6
ターミナルて下記のコマンドを実行し、 pythonのWeb サーバーを起動します。 mogi$ cd myFish mogi$ python -m SimpleHTTPServer
ブラウザて http://localhost:8000/ にアクセスするとデフォルトのアフリmyFishが動作します。
ここにあるファイルを編集してゲームを作っていきます。
Page 19
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.19
ファイル構成
6
①起動時の設定。画面サイズとか
②画像や音は resに置きます。
③resurce.jsは resのファイルを管理 app.jsがゲームのメインフログラム
これらのファイルだけを編集するだけてす。
Page 20
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.20
ファイルを差し替えましょう
6
https://goo.gl/8Bv2hn
下記からファイルをダウンロード解凍し、main.js,resource.js,app.jsファイルはそれぞれを上書き。 pngとmp3ファイルは resフォルダーにコピーしてください。
Page 21
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.21
動かそう
6
ふたたびブラウザて http://localhost:8000/ にアクセスするとアフリmyFishが動作します。
マウスクリックすると魚が浮かびます。サンゴを避けましょう。
Page 22
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.22
デバッグするには?
6
Chromeの JavaScriptコンソールを使います。コンソール使用中のキャッシュは Offに設定!
Page 23
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.23
画面のキーワード (シーン・レイヤー・スフライト )
6
シーン(画面) レイヤー 画像(スフライト)
音
ラベル
メニュー
表示フレームごとに処理が可能 ここて移動させることてスクロールなどの動きを実現
Page 24
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.24
どう考えれば作れるのか?フレームワークを理解
6
main.js①アフリ起動時の処理
ほぼ毎回同しフログラムresource.js
②画像、音などのリソース管理リソースファイル名を登録
app.js③メインフログラム(ゲームごとに異なる)
③ 1レイヤー初期化(− 必要な物を表示:タッチ可能にする)
③−1 0変数を初期化(リスタートのため)−③−1 1画面に表示するものを配置−③ー1 2− BGMを再生③−1 3タッチイベントを有効にする−③−1 4フレームごとに実行することを有効にする−
③ 2フレームごとの処理− ( 変化するものを処理 )③−2 1背景・サンゴのスクロール−③−2 2自機の表示−③−2− 3 点数の表示③−2− 4 衝突判定 → ゲームオーバー処理実行
Page 25
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.25
6
③ 3タッチした時の処理− (タッチの処理 )③−3 1効果音−③−3− 2上昇(表示はしない)③−3− 3上昇アニメーション
③ 4ゲームオーバー処理− ( 主に初期化て実行したことをやめる )③−4 1− BGM 停止③−4 2フレームごとに実行することを無効にする−③−4 3タッチイベントを無効にする−③−4 4リトライボタンを表示→押したらリトライ−
処理 ③ 5リトライ処理−
③−5 1新しくシーンを作成− ③ 6シーンの作成処理−
Page 26
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.26
フレームワークに合わせてフログラム説明
6
Page 27
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.27
iPhoneて動作確認するには?
6
xcodeprojファイルが用意されているのて、これを Xcodeて開いてビルドすれば OK。
Page 28
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.28
まずは Xcodeをインストールしましょう
6
Xcodeとは iPhoneの開発をするためのアフリてす。無償て使えます。Macて動作します。Windowsては使えません。ここを参考に Xcode6をインストールしてください。簡単てす。
http://www.atmarkit.co.jp/ait/articles/1410/02/news031_2.html
Page 29
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.29
実機 iPhoneて動かそう
6
iOS Developer Program への登録 ( 有料 )と実機ての動作
http://goo.gl/f2dh3y
実機て動かすには費用が。。必要てす。勉強代!!ここを参考に登録して実機て動かしましょう。 [実機てのアフリの実行 ]の節をまねすれば OK.
Page 30
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.30
6
うまく行けば、シミュレータの代わりに自分の iPhoneが選択てきるようになります。あとは再生ボタンを押せば実機にアフリが転送され実行てきるようになります。
※ 最初のビルドには 30分くらいかかります orz
myFish/frameworks/runtime-src/proj.ios_mac/myFish.xcodeproj
を Xcodeて開きます。
Page 31
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.31
Androidて動かすには?
6
http://qiita.com/turusuke/items/741267bbfc81a287438a
ここを参考に!
Page 32
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.32
もっとフログラムを学ぶには?
6
http://goo.gl/zSpb9B
cocos2d-jsを初心者向けに解説。バージョンが古い。 3.xに変換する必要がある。
APIマニュアル v3.6http://www.cocos2d-x.org/reference/html5-js/V3.6/index.html
3.x への変換はここを参考http://qiita.com/nise_nabe/items/98cf59caa6de6b1efd7a