cocos2d-x JavaScript Binding

について

株式会社TKS2 清水友晶

�  株式会社TKS2 http://tks2.net

�  スマートフォンアプリ開発 (iOS, Android, Windows Phone 8) Webコンテンツ開発

�  cocos2d-xへの開発参加 cocos2d-xを利用したアプリ開発 講演活動 執筆活動

�  Twitter: tks2shimizu

�  Blog: http://tks2.net/memo �  SlideShare: http://www.slideshare.net/doraemonsss �  Facebook: http://www.facebook.com/doraemonsss

清水 友晶

もうすぐ出版されます

ccooccooss22dd--xx入�門

CCOOMMIINNGG SSOOOONN

�  http://cocos2d-x.jp

�  cocos2d-x開発元Chukong Technologies社公認

�  cocos2d-xのための自由なコミュニティー

�  入門者から上級者まで誰でもOK!!ぜひご参加を!

�  cocos2d-xに関することなら何でも投稿できます!!

�  https://www.facebook.com/groups/152840204871454/

�  5/22 第8回 shinjuku.cocos2d-x

�  6/11 shinjuku.cocos2d-x初心者ハンズオン 　　　　～MacでAndroidアプリ開発環境を作ろう！～

�  6/22 cocos2d-xハンズオン勉強会

�  6/25 第9回 shinjuku.cocos2d-x

�  7/M shinjuku.cocos2d-x初心者ハンズオン 　　　　～WindowsでAndroidアプリ開発環境を作ろう！～

�  8/M shinjuku.cocos2d-x初心者ハンズオン 　　　　～MacでiOSアプリ開発環境を作ろう！～

目次 �  cocos2d-xにおけるC++とJavaScriptの違い

�  ゲームを作成してみよう！

�  JavaScriptを利用した機能

cocos2d-xにおける C++とJavaScriptの違い

�  対応OS �  C++ iOS, Android, Win32, 他多数 �  JS iOS, Android, Win32

�  アプリのスタート �  C++ AppDelegate::applicationDidFinishLaunching(); �  JS main.js

�  クラス（基本的に似ている） �  C++ CCDirector, CCScene, CCLayer, CCSprite �  JS cc.Director, cc.Scene, cc.Layer, cc.Sprite

ゲームを作成してみよう！ �  作成するゲームは1~25を順番にタップするゲーム

ゲームを作成してみよう！ �  プロジェクト作成

�  project-creator �  cd ./cocos2d-2.1rc0-x-2.1.3/tools/project-creator �  ./create_project.py

-project nyan25js -package net.tks2.nyan25js -language javascript

�  プロジェクト �  cocos2d-2.1rc0-x-2.1.3/project/nyan25js

�  リソースの配置 �  http://tks2.net/other/cardsjs.zip �  nyan25js/Resources/res

�  Xcode上では参照型ディレクトリとして登録されているため、Xcode上での追加作業は不要

カードを表示 �  キーポイント

�  CCDirector è cc.Director �  CCSprite è cc.Sprite �  CCP è cc.p

�  ソースはこちら https://gist.github.com/tks2shimizu/4daa18de6b892061c7dc

タップ処理 �  キーポイント

�  this.setTouchEnabled(true); �  this.setTouchMode(cc.TOUCH_ONE_BY_ONE);

�  onTouchBegan �  onTouchMoved �  onTouchEnded �  onTouchCanceled

�  ソースはこちら https://gist.github.com/tks2shimizu/d9c1ca033fd873786c25

ゲーム時間の表示 �  キーポイント

�  this.schedule(this.measureGametime); �  this.unschedule(this.measureGametime); �  measureGametime:function(dt)

�  CCLabelTTF è cc.LabelTTF

�  ソースはこちら https://gist.github.com/tks2shimizu/fa7735926c9cb9b502ec

ハイスコアの表示 �  キーポイント

�  sys.localStorage

�  ソースはこちら https://gist.github.com/tks2shimizu/dd626d40d07c8e142c90

リロードボタン �  キーポイント

�  cc.MenuItemLabel �  cc.Menu

�  ソースはこちら https://gist.github.com/tks2shimizu/28d5ac58d1e9a3b267c7

�  完成！！

JavaScriptを利用した機能 ソースのダウンロード？？

ネイティブのアプリにおいて アプリの更新を瞬時に行う方法 �  iOSアプリにおいてアプリを更新するには、Appleによる審査が必要。è1~2週間

�  Androidアプリにおいてアプリを更新するには、反映されるまでに掛かる。è2~3時間

�  WebViewを利用しJavaScriptで記述する方法もあるが問題あり。 �  Appleの審査が通らない �  処理が遅い �  バージョンによって処理が微妙に異なる

�  これらを解決する方法は、cocos2d-xにあります。

AssetsManagerクラス �  画面となるソースコード・リソースをダウンロードし、アプリを修正・拡張することができる

�  SpiderMonkey(JavaScriptエンジン)搭載

�  cocos2d-2.1rc0-x-2.1.3/samples/Cpp/AssetsManagerTest

�  必要なデータ �  ソースコード（JavaScript）・リソース �  バージョンファイル（1.0.1）

iOS版リリースまでの流れ �  新規アプリ登録

アプリとして成立する 最小限の実装

アプリ 申請

アプリ 申請完了

アプリ リリース

アプリの追加実装

メリット・デメリット �  メリット

�  アプリ更新の際、アプリ申請不要 �  Android版との同時リリースが容易

�  デメリット �  Android版においては、解析が容易（要root） �  iOS版においては、Jailbreakにより解析が可能 �  SpiderMonkey搭載のためアプリサイズが大きくなる

�  使いどころ �  ダウンロードコンテンツにより、他ユーザへ影響を及ぼさないもの

�  ゲームがアプリ内だけで完結する場合は適さない

�  備考 �  Appleにより弾かれたという報告は今のところない

おわり

�  ありがとうございました