メッセージの表示をしてみる

今回はenchant.jsでのメッセージの表示のさせ方を紹介します。

enchant.jsではLabelというクラスを使って文字を表示できるんですが、実はちょっとした問題があって、自動で改行させると文字が大きい場合重なってしまいます（訂正：どうやらこれは私の勘違いだったらしい(^^;)）。

なのでその問題も解決しつつ、RPGやアドベンチャーゲームとかである「１文字ずつ表示しつつ画面押したら一括表示する」やつを作ってみました。

上の画像がそれなんですがGIFのフレームレートが低かったので数文字ごとに出ているように見えますがプログラムはちゃんと１文字ずつ表示します。

今回のプログラムでは画面のどこでも好きな場所にメッセージを表示できるように作りました。うまくやれば吹き出しのようにして出すこともできるかもね(‘ω’)ノ

var MessageBox = enchant.Class.create(enchant.Group, {
    initialize: function(px, width, height){
        enchant.Group.call(this);
        
        //枠から少し間隔をあけるための数値
        var padding_right = 30;
        var padding_left = 30;
        var padding_top = 30;
        var padding_bottom = 30;
        
        //背景的なもの
        var surface = new Surface(width, height);// サーフェス生成
        surface.context.beginPath();
        surface.context.fillStyle = 'rgba(255, 0, 0, 0.5)';//色 
        surface.context.fillRect(0, 0, width, height);//X、Y、W、H
        var bg = new Sprite(width, height);
        bg.image = surface;
        this.addChild(bg);
        
        //初期化
        this.char_cnt = 0;//文字数カウント用
        this.line_char_cnt = 0;//一行の文字数カウント用
        this.line_cnt = 0;//行数カウント用 
        this.isNewLine = false;//改行フラグ
        this.isFull = false;//画面表示限界フラグ
        this.isEnd = false;//メッセージの最後まで来たフラグ
        this.isTouched = false;
        //メッセージ用配列。全角文字専用。
        this.lines = [];
        this.line_max = Math.floor((height - padding_top - padding_bottom) / (px+10));//最大行数を算出
        this.line_char_max = Math.floor((width - padding_right - padding_left) / px);//一行の最大文字数 
        for( var i = 0; i < this.line_max; i++){//
            this.lines[i] = new Label();   
            this.lines[i].x = padding_right;
            this.lines[i].width = width;
            this.lines[i].color = 'white';
            this.lines[i].font = px+'px sens-serif';
            this.lines[i].y = (px + 10) * i + padding_top; // 行の高さ
            this.lines[i].text = '';
            this.addChild(this.lines[i]);
        }
        //次のページへ行く合図点滅用
        this.btn = new Label();
        this.btn.x = width - 50; 
        this.btn.y = height - padding_bottom;
        this.btn.color = 'white';
        this.btn.font = px+'px sens-serif';
        this.btn.text = "▶";
        this.btn.visible = false;
        this.addChild(this.btn);
        
        this.addEventListener(enchant.Event.TOUCH_START, function(){
            this.isTouched = true;
        });
    },
    //メッセージ表示メソッド
    print: function(message){
        if(this.isFull){//画面いっぱいまで表示した？
            if(this.age % 5 == 0){//5フレーム毎に（点滅スピード）
                this.btn.visible = this.btn.visible ? false : true;//点滅表示
            }
            if(this.isTouched){//タッチした？
                this.isTouched = false;
                if(this.isEnd){//メッセージを最後まで表示していたら
                    //最後まで表示した後の処理（今回はとりあえず使った要素を削除しとく）
                    while(this.firstChild){//全要素を削除
                        this.removeChild(this.firstChild);
                    }
                    return;
                }
                this.line_char_cnt = 0;//一行の文字数カウント用
                this.line_cnt = 0;//行数カウント用 
                this.isNewLine = false;//改行フラグ
                this.isFull = false;//
                this.btn.visible = false;
                for( var i = 0; i < this.line_max; i++){//
                    this.lines[i].text = '';
                }
            }
            return;//もう用がないので抜ける
        }
   　　　if(this.isTouched){//タッチした？
            this.isTouched = false;
            while(this.char_cnt < message.length){
                if(message.substr(this.char_cnt, 1) != '/'){//半角スラッシュは改行の合図
                    this.lines[this.line_cnt].text += message.substr(this.char_cnt, 1);
                }else{
                    this.isNewLine = true;//改行しますよ
                }
                this.char_cnt++;//文字を進める
                if(++this.line_char_cnt >= this.line_char_max || this.isNewLine == true){//最大文字数か改行フラグtrueのとき
                    this.line_char_cnt = 0;//改行したので行の文字カウントは０に
                    this.isNewLine = false;//フラグを戻す
                    if(++this.line_cnt >= this.line_max){//最大行数に達したら
                        this.isFull = true;//画面表示限界まで来たフラグ
                        return;
                    }
                }
            }
            this.isFull = true;//画面表示限界まで来たフラグ
            this.isEnd = true;//最後まで来たよフラグ
            return;//もう用がないので抜ける
        }
        //メッセージ表示処理
        if(this.char_cnt < message.length){ 
            if(message.substr(this.char_cnt, 1) != '/'){//半角スラッシュは改行の合図
                this.lines[this.line_cnt].text += message.substr(this.char_cnt, 1);
            }else{
                this.isNewLine = true;//改行しますよ
            }
            this.char_cnt++;//文字を進める
            if(++this.line_char_cnt >= this.line_char_max || this.isNewLine == true){//最大文字数か改行フラグtrueのとき
                this.line_char_cnt = 0;//改行したので行の文字カウントは０に
                this.isNewLine = false;//フラグを戻す
                if(++this.line_cnt >= this.line_max){//最大行数に達したら
                    this.isFull = true;//画面表示限界まで来たフラグ
                    return;
                }
            }
        }else{
            this.isFull = true;//画面表示限界まで来たフラグ
            this.isEnd = true;//最後まで来たよフラグ
            return;
        }
    }
});

使い方・内容説明

今回はGroupを継承してクラスを作りました。で、クラスを作る際に文字の大きさと文字を表示する場所の幅と高さを指定します。それをもとに計算して一行に表示する文字の数と行数を出してます。

このプログラムでは文字の大きさと表示域の幅から計算された文字数で改行を行います。それと「/（半角スラッシュ）」を改行文字として扱っています。表示したい文字列の改行したい部分に入れてください。

あと、全角専用です。半角文字を使うと文字の幅が違うので一行の長さに差が出てしまうので全角文字だけ使用してください。

プログラムの内容としてはjavascriptのsubstr()メソッドを使って一文字ずつ取得して、一行の限界文字数またはスラッシュで改行し、表示行の最大数まで来たら画面クリックを促す▶を点滅表示させます。クリックされたら表示に使っていた変数たちを初期化して続きを表示させます。

printメソッドをメインループの内に書き込むと動きます。

あとがき

うん、まぁやりたいことはできたなって感じかな(^^;)がんばればもうちょっときれいに書けるかなぁ。。

それにまだ実際にゲーム内で使ってないんだよね。とりあえず作ってみただけって言うね(￣∇￣;)ハッハッハ

出来る方はお好きに改造して使ってくだされ(‘ω’)ノ

※ちなみにこのゲームで使いました(*´ω｀)

▷▷▷　世紀末サラダ伝　完結編