Cocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」

Cocos2d-x(JS) ハンズオン #1
株式会社TKS2 清水友晶

清水友晶
 株式会社TKS2
アプリ開発コンサル
Cocos2d-xサポート
スマホアプリ開発
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: ゲームエンジン調査
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

ShinyCocos
Cocos2dファミリー
Cocos2d
Cocos2d-
iPhone
Cocos2d-x
Cocos2d-
android
Cocos3d
Cocos2d-
html5
Cocos2d-
android-1
Cocos2d-
xnaCocos2d-
windows
Cocos2d-
swift

Cocos2d-x
Cocos2d-x
C++, Lua, JavaScript
Cocos2d-html5
JavaScriptv2.x
Native Web
Cocos2d-x
C++, Lua
Cocos2d-JS
JavaScriptv3.x
Native Native, Web
Cocos2d-x
C++, 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-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・メモリ
を考慮した実装技術が必要になるが、
まずはゲームを作る楽しさを感じる
ことができる

開発環境を
構築しよう！

実行できるプラットフォーム
Windows Mac
環境開発構築
難易度
ブラウザ ○ ○ 簡単
iOS × ○ 普通
Android ○ ○ 難しい
開発機のOS
実
行
対
象

Cocos2d-xのダウンロード
http://cocos2d-x.org/download/

インストール (1)
 ダウンロードしたzipファイル「cocos2d-x-v3.8.1.zip」
を任意のディレクトリ（ホームディレクトリなど）へ
展開

 setup.py
 Cocos2d-xを利用するプロジェクトの作成に、
cocosコマンドを利用する
 このcocosコマンドを利用できるようにするには、
setup.pyを用いセットアップを行うとよい
 setup.pyは、Pythonで記述されているため、Pythonがイ
ンストールされていなければいけない
 Macは、標準でインストールされている
 Windowsは、別途インストールが必要
 環境変数の設定を忘れずに

 setup.pyの実行
 Macはターミナルより、Windowsはコマンドプロンプト
より実行します
 setup.py実行中、Android開発環境に関する質問がありま
す。Androidの開発環境が不要な場合は、無視しても問題
ありません

 Androidの開発環境を用意する場合は、下記を入力
 Android NDKのパス
 Android SDKのパス
 ANTのパス
 すでにパスが通っている場合は、質問がスキップされます

 環境変数を反映させます
 Macの場合は、setup.py実行時の最後のメッセージにある
「source 〜」を実行します
 Windowsの場合は、コマンドプロンプトを再起動させます

cocosコマンド
 cocos newコマンド
 プロジェクトを作成します
 cocos runコマンド
 プロジェクトを実行します

プロジェクトを
作成しよう！

プロジェクト作成 (1)
 cocos newコマンドの実行
 Macはターミナルより、Windowsはコマンドプロンプト
より実行します
 コマンド実行に必要なパラメータ
 プロジェクト名
 -l … 開発言語
 C++ … cpp
 Lua … lua
 JavaScript … js
 サンプル
 cocos new NewProject -l js

プロジェクト作成 (3)
 作成されたプロジェクトのディレクトリ
 frameworks … ゲームエンジン
 src … ソースコード
 res … リソース（画像ファイルなど）

プロジェクトを
実行しよう！

プロジェクト実行 (1)
 cocos newコマンドの実行
 Macはターミナルより、Windowsはコマンドプロンプトよ
り実行します
 実行するプロジェクトのルートディレクトリへ移動します
 コマンド実行に必要なパラメータ
 -p … 実行するプラットフォーム
 iOS … ios
 Android … android
 ブラウザ … web
 サンプル
 cocos run -p ios
 cocos run -p android
 cocos run -p web

iOS Android

ブラウザ

参考になるサイト
 Cocos公式Wiki
http://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

おわり
 ありがとうございました

Cocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」

More Related Content

What's hot

Similar to Cocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」

More from Tomoaki Shimizu

Cocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」