View
2.017
Download
3
Category
Preview:
Citation preview
Cocos2d-x(JS) ハンズオン #1
株式会社 TKS2 清水友晶
清水 友晶株式会社 TKS2
アプリ開発コンサルCocos2d-x サポートスマホアプリ開発
プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動
マイブーム : ゲームエンジン調査
チラ裏開発メモ : http://tks2.net/memoSlideShare: http://www.slideshare.net/doraemonsssFacebook: http://www.facebook.com/doraemonsss
ShinyCocos
Cocos2d ファミリー
Cocos2d Cocos2d-iPhone Cocos2d-x
Cocos2d-android
Cocos3d
Cocos2d-html5
Cocos2d-android-1
Cocos2d-xnaCocos2d-
windowsCocos2d-
swift
Cocos2d-x
Cocos2d-xC++, Lua, JavaScript
Cocos2d-html5JavaScriptv2.x
Native Web
Cocos2d-xC++, Lua
Cocos2d-JSJavaScriptv3.x
Native Native, Web
Cocos2d-xC++, Lua, JavaScriptv3.7
Native, Web
Cocos2d-x 最新版 : Cocos2d-x v3.8.1 開発版 : Cocos2d-x v3.9 β0 オープンソース
クロスプラットフォーム開発 モバイル
iOS, Android デスクトップ
Windows, Mac OS X, Linux クロスブラウザ開発
ブラウザChrome, Safari, IE, Firefox
Cocos2d-x (JS)
Cocos2d-JS タイトル釣スタ
ユニゾンリーグ
Big Fish Casino
ネイティブもブラウザもOK ！
iOS, Android などスマホゲームも OK ！
ブラウザゲームも OK ！プラグイン不要！
プラグインインストール画面を見ると離脱するユーザ多数
（頑張れば）スマホゲームとブラウザゲームを 1 ソースで作ることも可能大型プロジェクトではオススメしません。。。
いざブラウザゲームに回帰しても、同じゲームエンジンで開発可能！
パフォーマンスも OK ！ネイティブアプリ
裏では Cocos2d-x が動いているJavaScript エンジン SpiderMonkey により、 JavaScript と
C++ の変換が行われているため、高い処理能力を保っているシューティングゲームの弾幕のような高負荷な処理でない
限り、問題になることはない
ブラウザアプリWebGL を利用しているので高パフォーマンス
WebGL が利用できないブラウザでは、従来の Canvas が利用される パフォーマンス注意
特別なプラグイン不要
セキュリティはどうなの？！ネイティブアプリ
jsc ファイルにコンパイルビルド時に「 -compile-script 」オプションを
つけることで jsc ファイルにコンパイルされるため、生のソースコードが晒されることはない
ブラウザアプリCocos2d-x(JS) に限った話ではなく、ブラウザアプリ全
体に言えることだが、 js ファイルが見えるため難読化していてもチートは容易クライアントはビューワのみとし、重要な処理はサーバで
行うなど、設計を塾考する必要がある ググると先人の知恵を多く見ることができます
JavaScript は開発者が多い初心者に優しい言語
ポインタに敷居を感じる必要はない
サーバサイド開発者でも、気軽に始めることができるNode.js を用いれば、全て JavaScript で完結！
実際のゲーム開発では CPU ・メモリを考慮した実装技術が必要になるが、まずはゲームを作る楽しさを感じることができる
JavaScript は人気がある
Cocos2d-x (JS) 始めよう！
開発環境を構築しよう！
実行できるプラットフォーム
Windows Mac 環境開発構築難易度
ブラウザ ○ ○ 簡単
iOS × ○ 普通
Android ○ ○ 難しい
開発機の OS
実行対象
Cocos2d-x のダウンロード
http://cocos2d-x.org/download/
インストール (1)ダウンロードした zip ファイル「 cocos2d-x-
v3.8.1.zip 」を任意のディレクトリ（ホームディレクトリなど）へ展開
インストール (2)setup.py
Cocos2d-x を利用するプロジェクトの作成に、cocos コマンドを利用する
この cocos コマンドを利用できるようにするには、 setup.py を用いセットアップを行うとよい
setup.py は、 Python で記述されているため、 PythonがインストールされていなければいけないMac は、標準でインストールされているWindows は、別途インストールが必要
環境変数の設定を忘れずに
インストール (3)setup.py の実行
Mac はターミナルより、 Windows はコマンドプロンプトより実行します
setup.py 実行中、 Android 開発環境に関する質問があります。 Android の開発環境が不要な場合は、無視しても問題ありません
インストール (4)setup.py の実行
Android の開発環境を用意する場合は、下記を入力Android NDK のパスAndroid SDK のパスANT のパス
すでにパスが通っている場合は、質問がスキップされます
インストール (5)setup.py の実行
環境変数を反映させますMac の場合は、 setup.py 実行時の最後のメッセージにある
「 source 〜」を実行しますWindows の場合は、コマンドプロンプトを再起動させます
cocos コマンド
cocos コマンドcocos new コマンド
プロジェクトを作成します
cocos run コマンドプロジェクトを実行します
プロジェクトを作成しよう！
cocos new コマンド
プロジェクト作成 (1)cocos new コマンドの実行
Mac はターミナルより、 Windows はコマンドプロンプトより実行します
コマンド実行に必要なパラメータプロジェクト名-l … 開発言語
C++ … cpp Lua … lua JavaScript … js
サンプルcocos new NewProject -l js
プロジェクト作成 (2)
プロジェクト作成 (3)作成されたプロジェクトのディレクトリ
frameworks … ゲームエンジンsrc … ソースコードres … リソース（画像ファイルなど）
プロジェクトを実行しよう！
cocos run コマンド
プロジェクト実行 (1)cocos new コマンドの実行
Mac はターミナルより、 Windows はコマンドプロンプトより実行します
実行するプロジェクトのルートディレクトリへ移動しますコマンド実行に必要なパラメータ
-p … 実行するプラットフォーム iOS … ios Android … android ブラウザ … web
サンプルcocos run -p ioscocos run -p androidcocos run -p web
プロジェクト実行 (2)iOS Android
プロジェクト実行 (3)ブラウザ
シーングラフ
作業はここまで
参考になるサイト
Cocos 公式 Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS API リファレンスhttp://cocos2d-x.org/wiki/Reference
Qiita（ tag: cocos2d-js ）https://qiita.com
Cocos2d-x (JS) ハンズオンCocos2d-x (JS) を学ぶチャンス！
PC を持参し実際に手を動かし、 Cocos2d-x (JS) が難しくないということが実感できます！
12/2( 水 ) Cocos2d-x (JS) ハンズオン #2日時 : 11/5( 木 ) 19:00 〜 21:00場所 : イベント & コミュニティスペース dots.内容 : Cocos2d-x (JS) の基本操作
画像の表示・アニメーション （ iOS, Android, ブラウザ）
http://line.me/S/sticker/1085672
おわり
ありがとうございました
Recommended