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

おわり

ありがとうございました