java scriptでつくるはじめてのiphoneゲーム開発体験

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を覚えたのだからゲームを作りたいよね。

COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.2

フログラミングを覚えようとした理由は何てすか

６

・ものを作ることが好きだから？・職業として将来性があるから？・儲かるから？


ゲームを作りたくて覚えた人も多いのては

６

・ゲームを作ってみたい！！


ゲームを作るなら iPhoneゲームてすよね

６

・課金ユーザが多いって聞く・ Androidよりレビューされそう


作る環境はどれがいいの？

６

・ Swift・ Unity・ Cocos2d-ｘ

将来的には Androidゲームも作りたい


JavaScriptならデザイナーてもわかるよね

６

JavaScriptならフログラミングてきそうそんなゲーム開発環境は？

　　　　 Cocos2d-JS


Cocos2d-JSとは

６

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


どんなゲームが作れるの？

６

http://www.cocos2d-x.org/wiki/MoonWarriors_-_Cocos2d-JS_Showcase　

http://www.cocos2d-x.org/wiki/MoonWarriors_-_Cocos2d-JS_Showcase

http://www.cocos2d-x.org/wiki/MoonWarriors_-_Cocos2d-JS_Showcase


６

この学びの対象者は？→JavaScriptがなんとなくわかる人てゲーム開発したい初心者Windowsても開発可能てすが今回はMacを使います。ターミナルの操作が少し必要てす。Windowsインストール参考 : http://tomoyukim.hatenablog.com/entry/2014/09/12/110627

教えないことは？→ばりばりの Cocos2dフログラマーてはないのて深い知識はありません。難しい質問はしないて。

http://tomoyukim.hatenablog.com/entry/2014/09/12/110627




講師Gashfara,Inc.代表　　デジタルハリウッド大学院客員講師茂木健一[email protected]　[email protected]　http://facebook.com/mogikenhttp://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の極意 [ 共著 ]（秀和システム）

mailto:[email protected]



http://facebook.com/mogiken

http://www.slideshare.net/mogiken1



11

成長を実現させるシステム”モバイルトータルソリューション”

Webシステム

１

スマホアフリ

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


どんなゲームを作るの？

６

背景とサンゴが横スクロール。魚がサンゴに衝突しないようにタッフしながら避けていくゲーム。いわゆる Flappyゲーム。


まずは Cocos2d-JSをインストールしましょう

６

必要な環境　Macと python2.7(Macにインストール済み )

ダウンロード　 http://www.cocos2d-x.org/download　から cocos2d-JSをダウンロードして適当なフォルダーに解凍してください。

http://www.cocos2d-x.org/download

http://www.cocos2d-x.org/download


６

ターミナルを開いて展開したフォルダーに移動してください。　mogi$ cd /Users/mogi/Documents/業務 /テクノ /cocos2d-js/cocos2d-js-v3.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$


６

setup.pyを実行すると、~/.bash_profileの値が書き変わるのて読み直します。ターミナルて　 . ~/.bash_profile　を実行してください。

mogi$ . ~/.bash_profile


今回のフロジェクトを作成しましょう

６

1つのゲームに１つのフロジェクトが必要てす。フォルダーが作成されます。

ターミナルを開いてフロジェクトを作成したいフォルダーに移動してください。　mogi$ cd /Users/mogi/Documents/業務 /テクノ /cocos2d-js

自分のフォルダーに変更してください

ターミナルて下記のコマンドを実行するとmyFishというフロジェクトフォルダーが作成されます。　mogi$ cocos new myFish -l js


とりあえず動かそう

６

ターミナルて下記のコマンドを実行し、 pythonのWeb サーバーを起動します。　　mogi$ cd myFish　mogi$ python -m SimpleHTTPServer

ブラウザて　 http://localhost:8000/　にアクセスするとデフォルトのアフリmyFishが動作します。

ここにあるファイルを編集してゲームを作っていきます。

http://localhost:8000/




ファイル構成

６

①起動時の設定。画面サイズとか

②画像や音は resに置きます。

③resurce.jsは resのファイルを管理　 app.jsがゲームのメインフログラム

これらのファイルだけを編集するだけてす。


ファイルを差し替えましょう

６

https://goo.gl/8Bv2hn　　

下記からファイルをダウンロード解凍し、main.js,resource.js,app.jsファイルはそれぞれを上書き。 pngとmp3ファイルは resフォルダーにコピーしてください。

https://goo.gl/8Bv2hn

https://goo.gl/8Bv2hn


動かそう

６

ふたたびブラウザて　 http://localhost:8000/　にアクセスするとアフリmyFishが動作します。

マウスクリックすると魚が浮かびます。サンゴを避けましょう。





デバッグするには？

６

Chromeの JavaScriptコンソールを使います。コンソール使用中のキャッシュは Offに設定！


画面のキーワード (シーン・レイヤー・スフライト )

６

シーン（画面）レイヤー画像（スフライト）

音

ラベル

メニュー

表示フレームごとに処理が可能　ここて移動させることてスクロールなどの動きを実現


どう考えれば作れるのか？フレームワークを理解

６

main.js①アフリ起動時の処理

ほぼ毎回同しフログラムresource.js

②画像、音などのリソース管理リソースファイル名を登録

app.js③メインフログラム（ゲームごとに異なる）

　③ １レイヤー初期化（− 必要な物を表示：タッチ可能にする）

③−１０変数を初期化（リスタートのため）−③−１１画面に表示するものを配置−③ー１２− BGMを再生③−１３タッチイベントを有効にする−③−１４フレームごとに実行することを有効にする−

　③ ２フレームごとの処理− ( 変化するものを処理 )③−２１背景・サンゴのスクロール−③−２２自機の表示−③−２− 3 点数の表示③−２− 4 衝突判定　→　ゲームオーバー処理実行


６

　③ ３タッチした時の処理− (タッチの処理 )③−３１効果音−③−３− 2上昇（表示はしない）③−３− 3上昇アニメーション

　③ ４ゲームオーバー処理− ( 主に初期化て実行したことをやめる )③−４１− BGM 停止③−４２フレームごとに実行することを無効にする−③−４３タッチイベントを無効にする−③−４４リトライボタンを表示→押したらリトライ−

処理　③ ５リトライ処理−

③−５１新しくシーンを作成−　③ ６シーンの作成処理−


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

６


iPhoneて動作確認するには？

６

xcodeprojファイルが用意されているのて、これを Xcodeて開いてビルドすれば OK。


まずは Xcodeをインストールしましょう

６

Xcodeとは iPhoneの開発をするためのアフリてす。無償て使えます。Macて動作します。Windowsては使えません。ここを参考に Xcode６をインストールしてください。簡単てす。

http://www.atmarkit.co.jp/ait/articles/1410/02/news031_2.html


実機 iPhoneて動かそう

６

iOS Developer Program への登録 ( 有料 )と実機ての動作

http://goo.gl/f2dh3y

実機て動かすには費用が。。必要てす。勉強代！！ここを参考に登録して実機て動かしましょう。 [実機てのアフリの実行 ]の節をまねすれば OK.




６

うまく行けば、シミュレータの代わりに自分の iPhoneが選択てきるようになります。あとは再生ボタンを押せば実機にアフリが転送され実行てきるようになります。

※ 最初のビルドには 30分くらいかかります orz

myFish/frameworks/runtime-src/proj.ios_mac/myFish.xcodeproj

を Xcodeて開きます。


Androidて動かすには？

６

http://qiita.com/turusuke/items/741267bbfc81a287438a

ここを参考に！




もっとフログラムを学ぶには？

６

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　

http://goo.gl/zSpb9B

http://goo.gl/zSpb9B

http://www.cocos2d-x.org/reference/html5-js/V3.6/index.html

http://www.cocos2d-x.org/reference/html5-js/V3.6/index.html

http://qiita.com/nise_nabe/items/98cf59caa6de6b1efd7a

http://qiita.com/nise_nabe/items/98cf59caa6de6b1efd7a

java scriptでつくるはじめてのiphoneゲーム開発体験

Software