Prainブログ

ゲーム開発とかIT小話とかその他雑記のブログ

*

ゲーム制作 Cocos2d-x関連 第2回 「Cocos2d-xで作ろう!!~画像の表示処理」

      2016/08/02

いきなり知らない単語が!Cocos2d-x?Cocos2d-xで画像を表示しよう!

 

 

スポンサーリンク

 

 

Cocos2d-xって?

今回はCocos2d-xを使用してゲームを作ります。

Cocos2d-xとはゲーム制作のフレームワークです。

 

 

フレームワークって?

ゲーム制作のフレームワークという言葉を一口で説明するのは難しいのですが、まあ、「ゲーム制作が比較的簡単になるモノ」、と考えていただければ結構だと思います。

 

 

Cocos2d-xのインストール

このCocos2d-xをMacにインストールする必要があるのですが、当シリーズ記事ではCocos2d-xのインストール手順は割愛します。

「Cocos2d-x インストール」などでググると詳しく解説しているサイトがいくつも出てくると思います。

 

また、開発環境としてXcodeが必要になります。こちらも「Xcode インストール」などでググると

詳しく解説しているサイトがいくつも出てくると思います。

 

今回使用するバージョンは

Cocos2d-x : 3.9

Xcode : 7.2.1

です。

Cocos2d-xは、当シリーズ記事では3.3以上であればおそらく問題ないと思います。(3.2以下はNG)Xcodeは最新の物がインストールされていれば問題ないです。

 

 

いきなり出鼻をくじいてしまったかもしれませんが、ある程度のプログラムを始めるためにはこのフレームワークや

開発環境といったものが必要になるのです。私もこの辺りはいつまでたっても苦手で好きになれません・・・

 

 

それでは、準備ができたら今度こそゲーム制作のプログラムを始めましょう。

 

 

プロジェクトの作成

まずはプロジェクトを作ります。「パズルアンドストライク」というゲームを「プロジェクト」という単位で管理していくことになります。

 

 

それでは早速プロジェクトを作りましょう。

 

 

1.ターミナルからプロジェクトを生成する

Macのターミナルを開いて以下のコマンドを打ち込みます。

「cocos new PuzzleAndStrike -p com.Prain -l cpp -d ~/Desktop/GameProject」

sc_create_project

2.プロジェクトのオープン

しばらくしたらデスクトップにGameProjectディレクトリが作成され、その中にPuzzleAndStrikeというディレクトリが存在すると思います。

そうしたら、「PuzzleAndStrike->proj.ios_mac->PuzzleAndStrike.xcodeproj」をダブルクリックしましょう。

sc_open_project

 

 

Xcodeの画面が開き、パズルアンドストライクのプロジェクトが読み込まれていると思います。

それでは、ゲーム制作開始です。まずは画像をシミュレータ画面に表示してみましょう。

 

 

画像を画面に表示する

まずは画面に画像を表示してみましょう。

表示するのはこのボール画像です。右クリックで画像を任意の場所に保存してください。

 

ball

 

 

1.Xcode左端にある「HelloWorldScene.cpp」をクリックする。

Xcodeの真ん中にHelloWorldScene.cppの中身が表示されると思います。

2_sc_helloworldscene

 

 

2.不要なサンプルソースコードを削除する。

31行目から73行目までを削除します。

2_sc_delete

 

 

3.以下のソースコードをHelloWorldScene.cppに追加する。

HelloWorldScene.cpp HelloWorld::init


// プレイヤー(ボール)
Sprite* ball = Sprite::create("ball.png");
ball->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
this->addChild(ball, 1, 0);

 

4.「ball.png」をリソースに追加する

Xcodeの左端にあるResources配下に「ball.png」をドラックアンドドロップします。

2_sc_sprite

リソース追加の際、確認ダイアログが出ますのでFinishを押してください。

 

 

シミュレータの起動

Xcode左上端の▶ボタンを押下してシミュレータを起動します。

シミュレータのデバイスはなんでもいいですが、以降iPhone 5sで統一したいと思います。

 

いかがでしょうか?こんな感じに表示されると思います。

自分で作ったプログラムに絵が表示されると感動しませんか?

2_sc_simu

次回ではこのプログラムについて解説していきます。

最初ですのでまずはスモールスタートで・・・

 

 

次回

第3回 「画像の表示処理 解説」

 - ,

        

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

文字送り
Cocos2d-x テキストを1文字ずつ表示する文字送りのやり方

こんにちは。akiです。 この記事ではテキストを1文字ずつ表示する「文字送り」に …

ボールの進行方向
ゲーム制作 Cocos2d-x関連 第6回 「画面端でのボールの跳ね返り」

今回は画面端でのボールの跳ね返りを製作していきましょう。   前回では …

ゲーム制作 Cocos2d-x関連 最終回 「勝利演出、敗北演出の追加」

勝利演出、敗北演出を実装していきます。今回で最終回です!   &nbs …

cocos2dx
Cocos2d-x クライアント側の処理とデータ送信(Httpリクエスト)

この記事は「Cocos2d-x セーブデータをサーバに送信して保存する」の続きに …

cocos2dx
Cocos2d-x カスタムイベントを利用してソースコードの可読性をあげる

こんにちは、akiです。 この記事ではカスタムイベントの使い方について説明します …