cocos2d-x v3.2を利用してシューティングゲームを作ろう!
DESCRIPTION
Cocos2d-x v3.2を利用してシューティングゲームを作ろう!TRANSCRIPT
![Page 1: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/1.jpg)
シューティングゲームを作ろう 株式会社TKS2 清水友晶
![Page 2: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/2.jpg)
清水 友晶 � 株式会社TKS2 スマートフォンアプリ開発 Webコンテンツ開発
� 日本cocos2d-xユーザ会代表 講演活動 執筆活動
� チラ裏開発メモ: http://tks2.net/memo
� SlideShare: http://www.slideshare.net/doraemonsss
![Page 3: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/3.jpg)
� 2014/9/8発売
� 3,200円 + 税
� 2014/7/26発売
� 2,980円 + 税
![Page 4: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/4.jpg)
� 日本cocos2d-xユーザ会 http://cocos2d-x.jp
� cocos2d-x開発元Chukong Technologies社公認
� cocos2d-xのための自由なコミュニティー
� 入門者から上級者まで誰でもOK!!ぜひご参加を! (1870人以上参加)
� cocos2d-xに関することなら何でも投稿できます!!
� https://www.facebook.com/groups/cocos2dxjp/
![Page 5: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/5.jpg)
� 9/13~14 アキバJam #01
� 9/18 第24回 shinjuku.cocos2d-x
� 9/26 第8回 cocos2d-x勉強会
� 9/29 第2回 cocos2d-JSもくもく勉強会
� 10/23 第25回 shinjuku.cocos2d-x
![Page 6: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/6.jpg)
目次 � 作成するシューティングゲームについて
� プロジェクトの作成
� ゲーム作成 1) ゲーム画面の作成 2) 背景のアニメーション 3) プレイヤー表示と操作 4) 敵の表示と移動アニメーション 5) 弾の発射 6) 当たり判定 7) タイトル画面 8) 画面遷移アニメーション
![Page 7: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/7.jpg)
作成するシューティングゲーム � 画面構成
� タイトル画面 � ゲーム画面
� Cocos2d-xの扱い方を学ぶためのシンプルなゲーム
![Page 8: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/8.jpg)
setup.pyの実行 � Cocos2d-xが用意しているsetup.pyを実行する
� 次の環境変数が設定される � COCOS_CONSOLE_ROOT
� 自動設定 � ANDROID_SDK_ROOT
� Android SDKのディレクトリを指定する � NDK_ROOT
� Android NDKのディレクトリを指定する � ANT_ROOT
� 入力不要 � 環境変数を反映する
� Win: コマンドプロンプトの再起動 � Mac: sourceコマンド実行
![Page 9: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/9.jpg)
プロジェクトの作成 � Cocos2d-xのプロジェクトを作成するためのコマンド
� setup.pyにおいてCOCOS_CONSOLE_ROOTをしたため、どこからでも実行することができる � オプション
� プロジェクト名 � -l … cpp, lua, javascript � -d … ディレクトリを指定 � -p … パッケージ名
cocos new NyanSky ‒d ~/Documents ‒p net.tks2.projects ‒l cpp
![Page 10: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/10.jpg)
ゲームの作成 � 今回使用する画像 http://goo.gl/Tsvxiv
� プロジェクトのResourcesディレクトリに配置する
![Page 11: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/11.jpg)
(1)ゲーム画面の作成 � 縦画面設定
� GameLayerクラスの作成
� 簡易マルチレゾリューション対応のためAppDelegateクラスapplicationDidFinishLaunching関数の編集
� 画像の表示 Spriteクラス
� http://goo.gl/9lCoEQ
![Page 12: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/12.jpg)
(2)背景のアニメーション � 背景画像のアンカーポイント変更
� 移動アニメーション MoveToクラス
� runAction関数により実行する
� http://goo.gl/EJJEU7
![Page 13: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/13.jpg)
(3)プレイヤーの表示と操作 � プレイヤークラスの作成 Player.h Player.cpp � Spriteクラスを継承 � 今回は特別な操作を行わないが、ヒットポイントや当たり判定など、プレイヤーに関する処理はこのクラスで行うといい
� EventListenerTouchOneByOneクラスに よるシングルタップイベントの実装
� http://goo.gl/WfLBu8
![Page 14: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/14.jpg)
(4)敵の表示と移動アニメーション � 敵クラスの作成 Enemy.h Enemy.cpp � Spriteクラスを継承 � 敵のタイプにより動きを変えれるような仕組みを持つ
� 毎フレーム処理を実行する scheduleUpdate関数 update関数
� http://goo.gl/GLIKBw
![Page 15: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/15.jpg)
(5)弾の発射 � 弾クラスの作成 Bullet.h Bullet.cpp � Spriteクラスを継承 � 表示と同時に前方へ移動するアニメーションを用意する
� スマートフォンでは、弾が自動で発射 するほうが操作しやすい
� http://goo.gl/4jcJzb
![Page 16: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/16.jpg)
(6)当たり判定 � 敵や弾の中心から一定の半径を、当たり判定の領域とする � 処理速度に直結するため、当たり判定の領域は複雑にしない
� もし大きな敵を作る場合も、複数の円の領域を用意するとよい
� 当たり判定チェックを毎フレーム行う
� http://goo.gl/nDEsVA
![Page 17: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/17.jpg)
(7)タイトル画面 � TitleLayerクラスの作成
� Buttonクラスによるボタン設置 � Buttonクラスを利用するために、CocosGUI.hを読み込む
� タッチイベントは細かく取得できるため、複雑な処理も可能
� http://goo.gl/FD6uxY
![Page 18: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/18.jpg)
(8)画面遷移アニメーション � TransitionSceneクラスを継承したクラスにより画面遷移アニメーションを行うことができる
� ここではページめくりのようなTransitionPageTurnクラスを利用する
� http://goo.gl/QmiG2Z
![Page 19: Cocos2d-x v3.2を利用してシューティングゲームを作ろう!](https://reader035.vdocuments.us/reader035/viewer/2022081718/5565fab1d8b42a2a4d8b4a02/html5/thumbnails/19.jpg)
おわり
� ありがとうございました