Cocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」
Download as PPTX, PDF3 likes3,475 views
2015/11/5 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」の資料です。Cocos2d-xの開発環境設定のほか、プロジェクトの作成・実行などを紹介しました。
Cocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」
- 1. Cocos2d-x(JS) ハンズオン #1 株式会社TKS2 清水友晶
- 2. 清水 友晶 株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動 マイブーム: ゲームエンジン調査 チラ裏開発メモ: http://tks2.net/memo SlideShare: http://www.slideshare.net/doraemonsss Facebook: http://www.facebook.com/doraemonsss
- 5. 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
- 6. Cocos2d-x 最新版: Cocos2d-x v3.8.1 開発版: Cocos2d-x v3.9 β0 オープンソース クロスプラットフォーム開発 モバイル iOS, Android デスクトップ Windows, Mac OS X, Linux クロスブラウザ開発 ブラウザ Chrome, Safari, IE, Firefox
- 8. Cocos2d-JSタイトル 釣スタ ユニゾンリーグ Big Fish Casino
- 9. ネイティブもブラウザもOK！ iOS, AndroidなどスマホゲームもOK！ ブラウザゲームもOK！ プラグイン不要！ プラグインインストール画面を見ると離脱するユーザ多数 （頑張れば）スマホゲームとブラウザゲームを1ソース で作ることも可能 大型プロジェクトではオススメしません。。。 いざブラウザゲームに回帰しても、 同じゲームエンジンで開発可能！
- 10. パフォーマンスもOK！ ネイティブアプリ 裏ではCocos2d-xが動いている JavaScriptエンジンSpiderMonkeyにより、JavaScriptとC++ の変換が行われているため、高い処理能力を保っている シューティングゲームの弾幕のような高負荷な処理でな い限り、問題になることはない ブラウザアプリ WebGLを利用しているので高パフォーマンス WebGLが利用できないブラウザでは、 従来のCanvasが利用される パフォーマンス注意 特別なプラグイン不要
- 11. セキュリティはどうなの？！ ネイティブアプリ jscファイルにコンパイル ビルド時に「-compile-script」オプションを つけることでjscファイルにコンパイルされる ため、生のソースコードが晒されることはない ブラウザアプリ Cocos2d-x(JS)に限った話ではなく、ブラウザアプリ全体 に言えることだが、jsファイルが見えるため難読化して いてもチートは容易 クライアントはビューワのみとし、重要な処理はサーバで行 うなど、設計を塾考する必要がある ググると先人の知恵を多く見ることができます
- 12. JavaScriptは開発者が多い 初心者に優しい言語 ポインタに敷居を感じる必要はない サーバサイド開発者でも、気軽に始めることができる Node.jsを用いれば、全てJavaScriptで完結！ 実際のゲーム開発ではCPU・メモリ を考慮した実装技術が必要になるが、 まずはゲームを作る楽しさを感じる ことができる
- 13. JavaScriptは人気がある
- 15. 開発環境を 構築しよう！
- 16. 実行できるプラットフォーム Windows Mac 環境開発構築 難易度 ブラウザ ○ ○ 簡単 iOS × ○ 普通 Android ○ ○ 難しい 開発機のOS 実 行 対 象
- 19. インストール (2) setup.py Cocos2d-xを利用するプロジェクトの作成に、 cocosコマンドを利用する このcocosコマンドを利用できるようにするには、 setup.pyを用いセットアップを行うとよい setup.pyは、Pythonで記述されているため、Pythonがイ ンストールされていなければいけない Macは、標準でインストールされている Windowsは、別途インストールが必要 環境変数の設定を忘れずに
- 20. インストール (3) setup.pyの実行 Macはターミナルより、Windowsはコマンドプロンプト より実行します setup.py実行中、Android開発環境に関する質問がありま す。Androidの開発環境が不要な場合は、無視しても問題 ありません
- 21. インストール (4) setup.pyの実行 Androidの開発環境を用意する場合は、下記を入力 Android NDKのパス Android SDKのパス ANTのパス すでにパスが通っている場合は、質問がスキップされます
- 22. インストール (5) setup.pyの実行 環境変数を反映させます Macの場合は、setup.py実行時の最後のメッセージにある 「source 〜」を実行します Windowsの場合は、コマンドプロンプトを再起動させます
- 23. cocosコマンド
- 24. cocosコマンド cocos newコマンド プロジェクトを作成します cocos runコマンド プロジェクトを実行します
- 25. プロジェクトを 作成しよう！
- 26. cocos newコマンド
- 27. プロジェクト作成 (1) cocos newコマンドの実行 Macはターミナルより、Windowsはコマンドプロンプト より実行します コマンド実行に必要なパラメータ プロジェクト名 -l … 開発言語 C++ … cpp Lua … lua JavaScript … js サンプル cocos new NewProject -l js
- 28. プロジェクト作成 (2)
- 29. プロジェクト作成 (3) 作成されたプロジェクトのディレクトリ frameworks … ゲームエンジン src … ソースコード res … リソース（画像ファイルなど）
- 30. プロジェクトを 実行しよう！
- 31. cocos runコマンド
- 32. プロジェクト実行 (1) cocos newコマンドの実行 Macはターミナルより、Windowsはコマンドプロンプトよ り実行します 実行するプロジェクトのルートディレクトリへ移動します コマンド実行に必要なパラメータ -p … 実行するプラットフォーム iOS … ios Android … android ブラウザ … web サンプル cocos run -p ios cocos run -p android cocos run -p web
- 35. シーングラフ
- 36. 作業はここまで
- 37. 参考になるサイト 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
- 38. 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, ブラウザ）