メッセージの表示をしてみる【enchant.js】

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

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

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

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

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

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;//改行したので行の文字カウントは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;//改行したので行の文字カウントは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メソッドをメインループの内に書き込むと動きます。

あとがき

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

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

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

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

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

どのゲームで遊ぶ?

スペースインベーダー風ゲーム。謎の宇宙人たちが襲って来たみたいなんでやっつけてください。
ゲームではない。想像してください。壮絶な男たちの戦いを。。
タイミングを狙って射撃するカジュアルゲーム。熱いストーリー付き。
ボタンを押して決められたパターンに電気をつけるパズルゲーム

コメント欄

  • 返事が遅くなってしまい申し訳ありません(;'∀')
    えと、私のサンプルではMessageBoxはクラスになっているのでまず
    var messageBox = new MessageBox("文字サイズ","表示幅" , "表示高さ");
    て感じで宣言します。
    そして使いたいところで
    messageBox.print("表示したいメッセージ");
    という感じでやればメッセージが表示されると思います。

  • いんわんさん初めまして。
    最近になってenchant.jsを知り検索で辿り着きました。
    こちらのサンプルを使わせて頂くにあたり、メインループ内でprint("メッセージの表示を一文字ずつ表示する。");
    と記述したのですが、ブラウザで開くと印刷画面が立ち上がってしまいます。
    もし宜しければ使い方をご教授願えませんでしょうか。

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発の参考書(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発