Android Cocos2d-x iOS アプリ

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

投稿日:2016年10月26日 更新日:

caption_speed

こんにちは。akiです。

この記事ではテキストを1文字ずつ表示する「文字送り」についてCocos2d-xで実装する方法を説明していきます。RPGなどで良く見かけるアレですね。

 

 

基本的な考え方

1.予めテキストを透明化しておく

2.時間差で1文字ずつテキストの透明化を解除する

 

 

プログラム実装


    // テキストの生成&透明化
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    auto text = Label::createWithTTF("文字送りのテストです。\n改行コードも挟めます。", FONT, 10);
    text->setPosition(Vec2(visibleSize.width / 2 + origin.x
                       , visibleSize.height / 2 + origin.y));
    text->setColor(Color3B::WHITE);
    text->setOpacity(0);// ポイント1 テキストの透明化
    this->addChild(text);

    // テキストの透明化解除
    for(int i = 0; i < text->getStringLength(); i++){

        auto func = CallFunc::create([this, i, text](){
            Sprite* sp = text->getLetter(i);
            if(sp != nullptr){
                text->getLetter(i)->setOpacity(255);// ポイント2 テキストを1文字ずつ透明化解除
            }
        });
        
        auto delay = DelayTime::create(.05 * i);
        auto seq = Sequence::create(delay, func, nullptr);
        
        if(text->getLetter(i) != nullptr){
            text->getLetter(i)->runAction(seq);
        }
        
    }

 

 

ポイントはgetLetter()ですね。改行コードも勝手に処理してくれます。

 

細かいテクニックですが、こういう演出がゲームらしさを出すのだと思います。

 

PrainGoogleAdSense

PrainGoogleAdSense

-Android, Cocos2d-x, iOS, アプリ
-, , ,

執筆者:


comment

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

関連記事

cocos2dx

Cocos2d-x サーバ側の処理とデータ送信(Httpレスポンス)

この記事は「Cocos2d-x セーブデータをサーバに送信して保存する」の続きになります。 ・第1回 : サーバにデータを保存したい理由と全体の流れ ・第2回 : クライアント側の処理とデータ送信(H …

新しいファイル

ゲーム制作 Cocos2d-x関連 第8回 「より保守性のあるプログラムを目指して」

  何だこのタイトルは・・・ゲーム制作はどこに行ったの?   結論からいうと、この回ではゲームとしての進展はありません。ただ、後々のプログラムの可読性を上げるために、プログラムを少 …

cocos2dx

Cocos2d-x Http通信の完了に同期して処理を実行する

  こんにちは、akiです。 この記事ではHttp通信処理の完了に同期して任意の処理を実行するやり方を説明します。 やり方は簡単でHttp通信のコールバックの中にカスタムイベントを発行する処 …

ボールの進行方向

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

今回は画面端でのボールの跳ね返りを製作していきましょう。   前回ではボールを弾くと、二度と触れられないところまで去って行ってしまいましたね。それでは早速やっていきましょう。   …

エフェクト

Cocos2d-x 加算合成を利用して、背景が黒い画像をアニメーションで使えるようにする方法

アニメーションを利用してエフェクト表示するときに、以下のようなエフェクト素材を目にすることはよくあると思います。背景が透過処理されているものではなく、黒く塗りつぶされているものです。 元になる素材は「 …