Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,615 views

Published on

2015/11/5 イベント&コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #01 「はじめてのCocos2d-x (JS)」の資料です。Cocos2d-xの開発環境設定のほか、プロジェクトの作成・実行などを紹介しました。

Published in: Technology
  • Be the first to comment

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

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

×