簡単な紙芝居風ストーリーシーンを作って遊ぼう！【enchant.js】

今回は私が使っている紙芝居風ストーリーシーンのプログラムを紹介しちゃいます(*´ω｀)

これは私のおバカゲームに必ずあるアホなオープニングやエンディングに使われる紙芝居風のシーンのプログラムです。リンク張っておくので一度ゲームを遊んでください↓

▷▷▷　秘密警察ギャボリン第3話

一枚の静止画を切り替えていくだけで大した機能もないですが、一応効果音やBGMも絵の切り替えに合わせて入れられるようになってます。

うまく使えば音付きのマンガみたいな感じにもできたりすると思うので挑戦してみてください

プログラムはこんな感じ

var FPS = 30;
//画面サイズ関係
var SCREEN_WIDTH = 640; //画面幅
var SCREEN_HEIGHT = 900;//画面高さ

//データはここへ
var ASSETS = {
    scn_001:'001.png',
    scn_002:'002.png',
    se_aaa:'aaa.mp3',
    se_bbb:'bbb.mp3',
    bgm_abc:'abc.mp3',
};
var story_data = [
     {
         image:'scn_001',//画像
         message:'あいうえお/かきくけこ/さしすせそ',//メッセージ
         se:'se_aaa',//効果音
         bgm:'bgm_abc'//BGM
     },
     {
         image:'scn_002',
         message:'たちつてと/なにぬねの/はひふへほ',
         bgm:'stop'//BGM停止
     },
];
enchant();
var core;
window.onload = function(){
    core = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);    
    core.preload(ASSETS);
    core.fps = FPS;
    core.onload = function(){
         var storyShow = new StoryShowScene(story_data, 0);
    }; 
    core.start();
} 
//ストーリーシーン---------------------------------------------------------------
var StoryShowScene = enchant.Class.create(enchant.Scene, {
    initialize: function(data, page){
        enchant.Scene.call(this);
        core.replaceScene(this);//シーンを入れ替える
        this.backgroundColor = 'rgba(0, 0, 0, 1)';//背景色  
        var sound = null;
        var bgm = new Bgm();
        var FRAME_HEIGHT = 260;//会話フレームの高さ
        //画像
        var picture = new Sprite(SCREEN_WIDTH, SCREEN_HEIGHT-FRAME_HEIGHT);
        this.addChild(picture);
        
        //メッセージクラス
        var messageBox = new MessageBox(30, SCREEN_WIDTH, FRAME_HEIGHT);
        messageBox.y = SCREEN_HEIGHT-FRAME_HEIGHT;//画面下部に
        this.addChild(messageBox);
        
        var isTimeToLoad = true;//ページを読み込むか？フラグ
        var message;//メッセージ表示用変数
        //このシーンのループ処理--------------------------------------
        this.addEventListener('enterframe', function(){ 
            if(isTimeToLoad){//読み込みフラグtrueの時
                isTimeToLoad = false;//falseに変えとく
                
                if(data[page]['se']){//効果音があるとき
                    sound = core.assets[data[page]['se']];
                    sound.play();
                }
                if(data[page]['bgm'] == 'stop'){//BGM停止
                    bgm.stop();
                }
                if(data[page]['bgm']){//BGMがあるとき
                    bgm.data = core.assets[data[page]['bgm']];    
                    bgm.play();
                }
    
                if(data[page]['image']){//画像があるとき
                    picture.image = core.assets[data[page]['image']];
                }else{
                    picture.image = "";
                }
                message = "";
                if(data[page]['message']){//メッセージがあれば初期化
                    messageBox.erase();
                    message = data[page]['message'];
                }
            }
            bgm.loop();//BGMループ処理
            messageBox.print(message);//メッセージ表示処理
        });
        
        //画面タッチで次へ進む
        this.addEventListener('touchend', function(){ 
            if(data[page]['se']){//効果音があったら止める
                sound.stop();
            }
            if(++page < data.length){//dataの最後まで来ていない
                isTimeToLoad = true;//ページ読み込みフラグをtrueに
            }else{//ページの最後まで来た
                //ゲーム内のイベントとして使うときはここにシーンを入れ替える処理を書く
                //今回は最初に戻るようにしてある
                bgm.stop();
                page = 0;
                isTimeToLoad = true;//ページ読み込みフラグをtrueに
            }
        });
    },
});
//メッセージ表示クラス
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, 255, 255, 1)';//色 
        surface.context.fillRect(0, 0, width, height);//X、Y、W、H
        var bg = new Sprite(width, height);
        bg.image = surface;
        this.addChild(bg);
        var surface2 = new Surface(width-10, height-10);// サーフェス生成
        surface2.context.beginPath();
        surface2.context.fillStyle = 'rgba(0, 0, 0, 1)';//色 
        surface2.context.fillRect(10, 10, width-10, height-10);//X、Y、W、H
        var bg2 = new Sprite(width-10, height-10);
        bg2.image = surface2;
        this.addChild(bg2);
        
        //初期化
        this.char_cnt = 0;//文字数カウント用
        this.line_char_cnt = 0;//一行の文字数カウント用
        this.line_cnt = 0;//行数カウント用 
        this.isNewLine = false;//改行フラグ
        this.isFull = 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);
    },
    //メッセージ表示メソッド
    print: function(message){
        if(this.isFull){//画面いっぱいまで表示した
            if(this.age % 5 == 0){//5フレーム毎に（点滅スピード）
                this.btn.visible = this.btn.visible ? false : 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;//画面表示限界まで来たフラグ
                }
            }
        }else{
            this.isFull = true;//画面表示限界まで来たフラグ
        }
    },
    //表示されていた内容を消す
    erase: function(){
        this.char_cnt = 0;
        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 = '';
        }
    }
});

//************************************************************************
//BGM再生(ループ再生）、一時停止、停止
var Bgm = enchant.Class.create({
    initialize: function(){
        this.data = null;
        this.isPlay = false;//プレイの状態フラグ
    },
    //BGM用音楽ファイルのセット
    set: function(data){
        this.data = data;
    },
    //再生(再生のみに使う)
    play: function(){
        this.data.play();
        this.isPlay = true;
        if(this.data.src != undefined){//srcプロパティを持っている場合
            this.data.src.loop = true;
        }
    },
    //ループ再生(必ずループ内に記述すること) PCでのループ再生で使う
    loop: function(){
        if(this.isPlay == true && this.data.src == undefined){//再生中でsrcプロパティを持っていない場合
            this.data.play();
        }
    },
    //再生停止(曲を入れ替える前は,必ずstop()させる)
    stop: function(){
        if(this.data != null){
            this.data.stop();
            this.isPlay = false;
        }
    },
    //一時停止
    pause: function(){
        if(this.data != null){
            this.data.pause();
        }
    }
});

簡単に説明するよ

このプログラムは画面にタッチするたびにstory_data配列の内容を読み込んで画面に表示してます。

story_data配列のimageは画像、messageはメッセージ、seは効果音、bgmはBGMです。それぞれ必要な時だけ記述する。

メッセージで使えるのは全角のみ。半角スラッシュを改行文字にしてます。

そんだけ。あとはプログラムを読んで理解してくれ(^^;)

あとがき

画像が切り替わるだけのショボいプログラムですがうまく使えば結構楽しめると思います。

うまく改造すればサウンドノベルゲームなんかも作れると思います、たぶん。作ったことないから知らんけど(^^;)