SpriteBuilder 画像表示をしてみる (Objective-C Swift C++)

 

 

 iPhone・AndroidアプリをObjective-C言語で作る

SpriteBuilder 画像表示をしてみる (Objective-C Swift)

画像を1枚表示してみたいと思います。


新規プロジェクトの作成


SpriteBuilderを立ち上げて、新規プロジェクトを作成しましょう。


作成する時の言語は、プルダウンでObjetive-C / Swiftを選んでください。


imagesフォルダーにimage画像を準備


imagesフォルダーをそのままドラッグしてMainSceneに組み込む


コードを書いて画像を表示してみましょう。

SpriteBuilderを使った開発では、Xcodeで新規プロジェクトを作成するのではなく、SpriteBuilderで新規プロジェクトを作成する点です。

作成後、自動的にXcodeプロジェクトが出力されています。

SpriteBuilder上でCmd + Shift + OのショートカットでXcodeを起動してみましょう。

次のようなファイル構成で起動します。

Objective-C 言語

MainScene.mを次のように変更してみてください。


#import "MainScene.h"


@implementation MainScene

{

    CCSprite *image;

}


// viewDidLoadと同じ立ち上げ時に起動動作

-(void) didLoadFromCCB

{

    

    // 画像の生成

    image = [[CCSprite alloc]initWithImageNamed:@"images/image.png"];


    // 画像を追加表示

    [self addChild:image];


    // 画像のポジション 中央表示

    // 座標系が異なります。UIKitは左上が(0,0)cocos2dは左下が(0,0)です。

    image.position = ccp(280,160);

    

}


@end


Swift 言語

MainScene.swiftを次のように変更してみてください。

import Foundation


class MainScene: CCNode {

    

    override func onEnter() {

        

        // 画像の生成

        var image = CCSprite(imageNamed: "images/image.png")


        // 画像を追加表示

        self.addChild(image)


        // 画像のポジション 中央表示

        // 座標系が異なります。UIKitは左上が(0,0)cocos2dは左下が(0,0)です。

        image.position = ccp(280,160)

        

        super.onEnter()

    }


}


GitHub Image_Swift


実行すると次のような実行画面になると思います。

 この画像を表示するプログラムの解析は参考にしたブログ「Cocos2d-Swift 絵を表示するプログラムの解説1・解説2」を参照してみてください。同じようなことを記載することになりますし私より凄く詳しく分かりやすく解説していますので参考にしてください。
 また「Seasons.NET」さんのサイトでブログ記載内容を勉強させていただきましたどうもありがとうごっざいました。


 

Cocos2dx 3.x C++言語

Top.hを次のように変更してみてください。

Top.h

 

#ifndef __Label__Top__

#define __Label__Top__


#include "cocos2d.h"


class Top : public cocos2d::Layer

{

public:

    

    virtual bool init();

    

    static cocos2d::Scene* createScene();

    

    CREATE_FUNC(Top);

};



#endif /* defined(__Label__Top__) */

 

Top.ccpを次のように変更してみてください。

Top.cpp

 

#include "Top.h"


USING_NS_CC;


SceneTop::createScene()

{

    // 「シーン」は自動解放オブジェクトです

    auto scene = Scene::create();

    

    // 「レイアウト」は自動解放オブジェクトです

    auto layer = Top::create();

    

    // シーンに子としてレイヤーを追加

    scene->addChild(layer);

    

    // シーンを返す

 

    return scene;

}



// INIT」初期化

bool Top::init()

{

    if ( !Layer::init() )

    {

        return false;

    }

        //画面サイズを取得

        Size winSize = Director::getInstance()->getVisibleSize();

        // バックグランドカラー(ブルー)

        auto background = LayerColor::create(Color4B::BLUE,

                                             winSize.width,

                                             winSize.height);

        // Layerにバックグランドを追加

        this->addChild(background);


        //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

    

        //画像CCSpriteクラスを初期化しています。

        auto sprite = Sprite::create("Icon-152.png");

    

        //位置を設定

        sprite->setPosition(Vec2(680,400));

    

        //画面に追加をしています。

 

        this->addChild(sprite);

        

    return true;

}


実行すると次のような実行画面になると思います。

▫️私が参考にしている書籍