enchant.jsで簡単にゲームが作れるテンプレート公開！！

2018年7月29日 / inwan / コメントする

今日は自分の作ったテンプレートを公開してみようかと思います(*´ω｀)

このテンプレートではenchant.jsですぐにゲーム開発が始められるくらいに必要最低限の機能は入れてあります。初心者でもこのテンプレートと一冊enchant.jsの本を買ってくれば何とかゲームつくれるんじゃないかと思います(*´ω｀)

しかし、プログラムの記事を書いといて言うのもなんですが、やっぱり他人に自分のプログラムを見せるのは恥ずかしい(*ﾉωﾉ)しかもテンプレートなんて裸を見られているにも等しい行為(*´Д｀)ﾊｧﾊｧ･･

で、ここからダウンロードできます(サクッと進める)→ダウンロード

（なんか試しに自分でダウンロードするとマカフィーが危険とか言ってくるんですけど(;´･ω･)。自分で作って上げたのに危険て言われる悲しさよ(´；ω；｀)

使い方と内容の説明

ダウンロードして解凍してフォルダ内にあるindex.htmlを実行するとブラウザが開いてゲームが起動します。

テンプレートなのでゲームとしての中身はないですが、一応プレイヤーキャラを操作できるようにだけはしておきました。

このテンプレートの特徴としては

タイトル画面、ゲーム画面、ポーズ画面、ゲームオーバー画面の切り替え
時間のカウントダウン
音の再生
ツイート機能

最低限ゲームらしく見える機能はあると思うので、あとは何かしらゲーム要素を付け加えれば立派なゲームになってくれると思います(*´ω｀)

あと、音に関してですが、私はネットで見つけた無料で使える音源を使わせてもらってるのですが、それを一緒に配布することは出来ないので、プログラム内の音関係のところはすべてコメントアウトしてあります(そうしないとエラーになるので)。なので音を鳴らしたい場合はご自身で音源を用意してコメントアウトを解除してください(‘ω’)ノ

プログラム

一応プログラムの一部を載せときます。こんな感じになっとります。

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

//ゲーム場面用予約語
var SCENE_TITLE = 1;
var SCENE_MAINGAME = 2;
//データはここへ
var ASSETS = {
    img_title:'img/title.png',
    img_player:'img/player.png',
    img_pause:'img/pausebutton.png',
    img_buttons:'img/buttons.png',
    img_gameover:'img/gameover.png',
    /*
    se_start:'sound/aaa.mp3',
    se_ok:'sound/bbb.mp3',
    se_cancel:'sound/ccc.mp3',
    se_select:'sound/ddd.mp3',
    bgm_main:'sound/abc.mp3',
    bgm_gameover:'sound/def.mp3',
    */
};
//twitter
function twitter(text){//表示したい文章を引数に持ってくる
    var title = "title";
    var url = "http://aaaa.com";//ゲームのURLを入れる
    var hashtag = "ゲーム";//カンマ区切りで複数可能
    window.open("http://twitter.com/intent/tweet?text=【"+title+"】"+text+"&url=" + url+"&hashtags="+hashtag);	
}
//プログラム開始初期化処理--------------------------------------
enchant();
var core;//ゲーム基幹
var se_ok, se_cancel, se_select, bgm;//BGMとよく使う効果音はグローバルにした

window.onload = function(){
    core = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);    
    core.preload(ASSETS);
    core.fps = FPS;
    core.onload = function(){
        system = new System();
        system.changeScene(SCENE_TITLE);
        /*
        //基本効果音・BGMの設定
        se_ok = new SoundEffect();
        se_ok.set(core.assets['se_ok'], 2);
        se_cancel = new SoundEffect();
        se_cancel.set(core.assets['se_cancel'], 2);
        se_select = new SoundEffect();
        se_select.set(core.assets['se_select'], 2);
        bgm = new Bgm();
        */
    }; 
    core.start();
} 
//システムクラス（ゲーム全体で必要な要素を保持する）---------------------------
var System = enchant.Class.create({
    initialize: function(){
        this.score = 0;
    },
    //シーン切り替え
    changeScene: function(sceneNumber){
        switch(sceneNumber){
            case SCENE_TITLE:
                var title = new TitleScene();
                break;
            case SCENE_MAINGAME:
                var main = new MainGameScene();//メインゲームへ
                break;
        }
    },
});
//メインゲームシーン---------------------------------------------------------------
var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        enchant.Scene.call(this);
        //画面初期処理-----------------
        core.replaceScene(this);//シーンを入れ替える
        this.backgroundColor = 'rgba(0, 0, 0, 1)';//背景色 
        var screen = new Group();//ゲーム用スクリーン作成
        this.addChild(screen);
        
        //自機クラス生成
        var player = new Sprite(64, 64);
        player.image = core.assets['img_player'];
        player.moveTo(300, 500);
        screen.addChild(player);

        //得点表示
        var label_score = new Label();
        label_score.color = 'white';
        label_score.font = '30px sens-serif';
        label_score.moveTo(250, 20);
        screen.addChild(label_score);
        
        //残り時間表示
        var timer = new TimeCountDown(0, 30);//分、秒で設定
        timer.moveTo(550, 20);
        screen.addChild(timer);
        
        var btn_pause = new Sprite(64, 64);
        btn_pause.image = core.assets['img_pause'];
        screen.addChild(btn_pause);
        btn_pause.addEventListener('touchend', function(){
            //se_ok.play();
            var pauseScene = new PuaseScene();
        });
        
        //自機の操作（このシーンへのタッチで操作）
        this.addEventListener('touchstart', function(e){
            player.px = e.x;
            player.py = e.y;
        });
        this.addEventListener('touchmove', function(e){
            player.x -= player.px - e.x;
            player.y -= player.py - e.y;
            player.px = e.x;
            player.py = e.y;
        });
                              
        //メインゲームシーンのループ処理------------------------------------
        this.addEventListener('enterframe', function(){
            //bgm.loop();//BGMループ再生
            if(timer.isTimeUp){//タイムアップ
                //bgm.stop();
                var gameover = new GameoverScene();//ゲームオーバーシーンへ
                removeChildren(this);//シーンの子要素を削除
                return;
            }
            label_score.text = ('00000000' + system.score).slice(-8);//得点表示
        });
    },
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

var FPS = 30;

//画面サイズ関係

var SCREEN_WIDTH = 640; //画面幅

var SCREEN_HEIGHT = 900;//画面高さ

var GAME_SCREEN_HEIGHT = 900;//ゲーム画面

var GAME_SCREEN_WIDTH = 640;//ゲーム画面

//ゲーム場面用予約語

var SCENE_TITLE = 1;

var SCENE_MAINGAME = 2;

//データはここへ

var ASSETS = {

img_title:'img/title.png',

img_player:'img/player.png',

img_pause:'img/pausebutton.png',

img_buttons:'img/buttons.png',

img_gameover:'img/gameover.png',

se_start:'sound/aaa.mp3',

se_ok:'sound/bbb.mp3',

se_cancel:'sound/ccc.mp3',

se_select:'sound/ddd.mp3',

bgm_main:'sound/abc.mp3',

bgm_gameover:'sound/def.mp3',

};

//twitter

function twitter(text){//表示したい文章を引数に持ってくる

var title = "title";

var url = "http://aaaa.com";//ゲームのURLを入れる

var hashtag = "ゲーム";//カンマ区切りで複数可能

window.open("http://twitter.com/intent/tweet?text=【"+title+"】"+text+"&url=" + url+"&hashtags="+hashtag);

}

//プログラム開始初期化処理--------------------------------------

enchant();

var core;//ゲーム基幹

var se_ok, se_cancel, se_select, bgm;//BGMとよく使う効果音はグローバルにした

window.onload = function(){

core = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);

core.preload(ASSETS);

core.fps = FPS;

core.onload = function(){

system = new System();

system.changeScene(SCENE_TITLE);

//基本効果音・BGMの設定

se_ok = new SoundEffect();

se_ok.set(core.assets['se_ok'], 2);

se_cancel = new SoundEffect();

se_cancel.set(core.assets['se_cancel'], 2);

se_select = new SoundEffect();

se_select.set(core.assets['se_select'], 2);

bgm = new Bgm();

};

core.start();

}

//システムクラス（ゲーム全体で必要な要素を保持する）---------------------------

var System = enchant.Class.create({

initialize: function(){

this.score = 0;

//シーン切り替え

changeScene: function(sceneNumber){

switch(sceneNumber){

case SCENE_TITLE:

var title = new TitleScene();

break;

case SCENE_MAINGAME:

var main = new MainGameScene();//メインゲームへ

break;

}

});

//メインゲームシーン---------------------------------------------------------------

var MainGameScene = enchant.Class.create(enchant.Scene, {

initialize: function(){

enchant.Scene.call(this);

//画面初期処理-----------------

core.replaceScene(this);//シーンを入れ替える

this.backgroundColor = 'rgba(0, 0, 0, 1)';//背景色

var screen = new Group();//ゲーム用スクリーン作成

this.addChild(screen);

//自機クラス生成

var player = new Sprite(64, 64);

player.image = core.assets['img_player'];

player.moveTo(300, 500);

screen.addChild(player);

//得点表示

var label_score = new Label();

label_score.color = 'white';

label_score.font = '30px sens-serif';

label_score.moveTo(250, 20);

screen.addChild(label_score);

//残り時間表示

var timer = new TimeCountDown(0, 30);//分、秒で設定

timer.moveTo(550, 20);

screen.addChild(timer);

var btn_pause = new Sprite(64, 64);

btn_pause.image = core.assets['img_pause'];

screen.addChild(btn_pause);

btn_pause.addEventListener('touchend', function(){

//se_ok.play();

var pauseScene = new PuaseScene();

});

//自機の操作（このシーンへのタッチで操作）

this.addEventListener('touchstart', function(e){

player.px = e.x;

player.py = e.y;

});

this.addEventListener('touchmove', function(e){

player.x -= player.px - e.x;

player.y -= player.py - e.y;

player.px = e.x;

player.py = e.y;

});

//メインゲームシーンのループ処理------------------------------------

this.addEventListener('enterframe', function(){

//bgm.loop();//BGMループ再生

if(timer.isTimeUp){//タイムアップ

//bgm.stop();

var gameover = new GameoverScene();//ゲームオーバーシーンへ

removeChildren(this);//シーンの子要素を削除

return;

}

label_score.text = ('00000000' + system.score).slice(-8);//得点表示

});

あとがき

ゲーム作ったことないけど作ってみたいと思っている方はぜひ一度試してみてください(‘ω’)ノ

あと、enchant.jsの良い点を一つ上げるとしたら軽いことです。サクッと作ってサクッと実行してサクッと公開できます(自分のサイトがあればだけど)。まぁ他の環境で作ったことないんだけど(；´∀｀)（でもunityのゲームってなかなか始まらなくてちょっとイライラしない？）

まぁそんなさっくり作れる感じなので他の環境でブイブイ言わしてる方も軽い気持ちでやってみたりして欲しいです(*´ω｀)

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

2018年7月26日 / inwan / コメントする

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

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

inwans.com

秘密警察ギャボリン　第三話

http://inwans.com/play/gabolin03/

秘密警察ギャボリン第三話！爆弾を仕掛けられた地下から時間内に脱出しろ！！

一枚の静止画を切り替えていくだけで大した機能もないですが、一応効果音や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();
        }
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

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です。それぞれ必要な時だけ記述する。

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

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

あとがき

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

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

enchant.jsのGroupクラスはとっても便利

2018年7月21日 / inwan / コメントする

enchant.jsでゲームを作っていて気付いたのがGroupクラスの便利さ。

実は最初は使い方が分からずあんまり使っていなかったんですが、何度か使っているうちに「そう使うものだったのか！」という発見がありました(；´∀｀)

というわけで私なりに気づいたGroupの使い方を説明したいと思います。

Groupは親になる

まずGroupとは何かって話ですが、簡単に言うと要素の親になります。スプライトを画面に表示する際にaddChild()を使っていますが、綴りの通り子をくっつけているわけです。つまりルートシーンにaddChildするとルートシーンが親になります。

で、Groupを使うときはGroupにaddChildします。そうすることでGroupが親になります。

ちょっと何言ってるかわからない、ってなってるかもしれませんがenchant.jsではaddChildされた要素は親要素に対して座標を持ちます。つまりシーンにaddChildされるとシーンに、GroupにaddChildされるとGroupに対しての座標になります。

Groupの座標を変えるだけで済む

enchant.jsではスプライトなどが持つ座標は画面に対しての絶対座標ではなく、相対座標になっています。つまり、

親が動けば子も動く

ということです。例えばこんな感じのメッセージボックスを表示させたい場合

Groupを使ってこのメッセージボックスを作ると後で表示位置を変えたくなった時にGroupの座標を変えるだけで済みます。Groupの座標を変えるだけで子の要素も移動します。なぜなら子の要素は親の座標を基準にした座標になるからです。

さらに便利なことはGroupを拡大・縮小すると子要素も同じくそうなります。

あとがき

ちょっと親子関係について説明が下手で内容が伝わっていないんじゃないかと不安です(-_-;)

一応、親子関係でいうとGroupの親はシーンでシーンの親は画面になります。つまりシーンすら画面に対しての座標を持つので動かせます。

Groupを上手く使えば大きなキャラだって自由自在に動かせる！？はずです(^^;)

enchant.jsのクラスの作り方

2018年7月21日 / inwan / コメントする

enchant.jsにはクラスのようなものを作れる機能があります。実は私も正確にクラスというものがどういうものかは知らないんですが「役割をまとめたもの」という風に理解して使っています。

クラスの作り方

書き方としては以下のようになります。

var Abc = enchant.Class.create({
    //処理
});

var abc = new Abc();

var Abc = enchant.Class.create({

//処理

});

var abc = new Abc();

まずクラスを記述して、newで生成するって感じです。これでクラスとして扱うことができます。

後はこの中にメンバやメソッドなどを書いていきます。

メソッドは以下のように書きます

var ABC = enchant.Class.create({
    aaa: function(){//メソッドaaa
        //処理
    },//カンマが必要
    bbb: function(a, b){//メソッドbbb
        //処理
    }
});

var ABC = enchant.Class.create({

aaa: function(){//メソッドaaa

//処理

},//カンマが必要

bbb: function(a, b){//メソッドbbb

//処理

}

});

各メソッドの間にはカンマが入ります。

使い方が決まってるメソッド

メソッドの中には使われ方が決まっているものもあります。

・initialize・・クラスをnewで生成したときに自動で行われる初期化処理です。初期値を設定しておきたいときなどに使います。もちろん後で呼び出して使うこともできます

・onenterframe・・フレームごとに行う処理を書きます。フレーム毎に勝手に処理してくれます。便利ですが個人的にはあまり使っていません。私はフレーム毎の処理はすべてメインループに書いています。その方が自分の考えた順番で処理させることができるし後で読み返したときに流れが分かるためです。ただし、基本的に流れに関係ないようなものはここに書くこともあります。（たぶんこれはSpriteなどにだけあるようです。なのでSpriteを継承しないとないみたい）

継承っていう機能

クラスには継承っていう別のクラスの機能を引き継いで新しいクラスを作る機能があります。たぶん最初はSpriteを継承してプレイヤークラスを作ったりすると思います。その際の書き方は以下のようになります

var Player = enchant.Class.create(enchant.Sprite, {
    enchant.Sprite.call(this, w, h);
    //処理
});

var Player = enchant.Class.create(enchant.Sprite, {

enchant.Sprite.call(this, w, h);

//処理

});

これでSpriteクラスを持った新しいクラスを作ることができます。もちろん自作のクラスも継承できます（enchant.Spriteの部分を自作クラスに変える）。

さらに、継承して作ったクラスを継承してまた新しいクラスをつくることもできます。継承を上手く利用するとプログラムを記述する量を格段に減らすことができます。ただし、それにはプログラムを再利用しやすいように考えて書く必要があるので初心者には難しいんですよね。。(；´Д｀)まぁそういうこともできるって頭の片隅に入れておきましょう。

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

2018年7月21日 / inwan / コメントする

今回は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;
        }
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

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メソッドをメインループの内に書き込むと動きます。

あとがき

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

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

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

enchant.jsでのシーンの切り替えについて

2018年7月8日 / inwan / コメントする

ゲームではメインのゲームを遊ぶ部分以外にもタイトル画面やポーズ画面など、いくつかの違う画面を表示する必要があります。

enchant.jsではそれらの画面のことをシーンといい、それぞれのシーンを必要に応じて切り替えて表示することができます。

シーンの切り替えにはreplaceSceneとpushScene & popSceneがあります

replaceSceneについて

replaceSceneはrootSceneの内容を指定されたシーンに書き換えます。なのでタイトル画面→メインゲーム→エンディングなど完全に違うシーンに移るときなどに使用します。

シーンは切替可能ということで独立したクラスとして作成できます。Sceneクラスを継承して各シーンのクラスを作成します。

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        enchant.Scene.call(this);
        core.replaceScene(this);//シーンを入れ替える

        this.addEventListener('enterframe', function(){
            //このシーンのループ処理はここに書く
　　　　});
    }
});

var MainGameScene = enchant.Class.create(enchant.Scene, {

initialize: function(){

enchant.Scene.call(this);

core.replaceScene(this);//シーンを入れ替える

this.addEventListener('enterframe', function(){

//このシーンのループ処理はここに書く

　　　　});

}

});

上記のような感じにクラスを作るとクラスが生成された時点でroorSceneがこのシーンの内容に切り替わり表示されるようになります。

pushScene & popSceneについて

pushSceneとpopSceneは画面を一時的に切り替えたいときに使えます。

pushSceneはrootSceneの上に新しいシーンをのせるような感じになります。背景を指定しなければ下にrootSceneの内容がそのまま表示されます。ただし、rootSceneから切り替わっているのでrootSceneの動きは止まっています。

popSceneをするとrootSceneの上にあったシーンが消えてrootSceneに戻ります。

つまり一時的にしか画面の切り替えが必要のない、もしくはrootSceneの上に出したいシーン（ポーズ画面、会話イベントシーン）などに使うのに向いています。

var PuaseScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        enchant.Scene.call(this);
        core.pushScene(this);//プッシュで上に出す
　　　
　　　　this.addEventListener('enterframe', function(){

            //このシーンのループ処理

            if(//画面を戻す条件){
                removeScene(this);//このシーンの要素を削除
                core.popScene();
            }
        });
    }
});

var PuaseScene = enchant.Class.create(enchant.Scene, {

initialize: function(){

enchant.Scene.call(this);

core.pushScene(this);//プッシュで上に出す

　　　　this.addEventListener('enterframe', function(){

//このシーンのループ処理

if(//画面を戻す条件){

removeScene(this);//このシーンの要素を削除

core.popScene();

}

});

}

});

シーンの切り替え時には要素の削除を忘れずに

画面の切り替えをして前のシーンが画面上消えてもシーンで使った要素が残っています。これはたぶんHTML5ゲームの特徴で、プログラムの変数とは関係なくHTMLの要素として記録されているので、別にHTMLの要素を消す必要があるようです。

function removeScene(scene){
    while(scene.firstChild){
        scene.removeChild(scene.firstChild);
    }
}

function removeScene(scene){

while(scene.firstChild){

scene.removeChild(scene.firstChild);

}

この関数を使って忘れずに削除しておきましょう。

残り時間をカウントダウンする【enchant.js】

2018年7月7日 / inwan / コメントする

ゲームに制限時間を設けたいときに使えるクラスを作ってみました。

画面に文字を表示させるのでLabelクラスを継承して作っています。

プログラム

var TimeCountDown = enchant.Class.create(enchant.Label, {
    initialize: function(min, sec){//引数に分と秒を入れる
        enchant.Label.call(this);
        this.color = "white";
        this.font = '25px sens-serif';
        this.isTimeUp = false;
        var tick = 0;
        var minute = min;
        var second = sec; 
        this.addEventListener('enterframe', function(){
            if(tick++ >= core.fps){
                tick = 0;
                if(--second < 0){
                    second = 59;
                    if(--minute < 0){
                        this.isTimeUp = true;
                    }
                }
            }
            this.text = minute + ":" + ('00' + second).slice(-2);//時間
        });
    }
});

var TimeCountDown = enchant.Class.create(enchant.Label, {

initialize: function(min, sec){//引数に分と秒を入れる

enchant.Label.call(this);

this.color = "white";

this.font = '25px sens-serif';

this.isTimeUp = false;

var tick = 0;

var minute = min;

var second = sec;

this.addEventListener('enterframe', function(){

if(tick++ >= core.fps){

tick = 0;

if(--second < 0){

second = 59;

if(--minute < 0){

this.isTimeUp = true;

}

this.text = minute + ":" + ('00' + second).slice(-2);//時間

});

}

});

使うときは引数に分と秒をして使います。

var timer = new TimeCountDown(5, 0);//分、秒を指定
timer.moveTo(10, 10);
core.rootScene.addChild(timer);

var timer = new TimeCountDown(5, 0);//分、秒を指定

timer.moveTo(10, 10);

core.rootScene.addChild(timer);

残り時間が０になるとisTimeUpフラグがtrueになります。

簡単な説明

tickがフレームごとに加算されてそれが設定されているfps以上になると1秒としています。

他のやり方を検索で調べてみると除算を使ってやってるやり方ばかりだったので除算を使わないやり方をつくりました。enchant.jsではスマホで高FPSを出すのは難しいので除算はできるだけ避けたいと個人的に思ってます（実際どれくらい違うのかは知らんけどね(；´∀｀)）

あと、この方法だと正確に1秒を計れません(^^;)実際に計ってみると1分で2～3秒ずれてました。FPSがいつも確実に1秒に設定した数字になっているとは限らないので仕方ないことなんですけどね(；´∀｀)

不要な要素は削除しよう【enchant.js】

2018年6月17日 / inwan / コメントする

enchant.jsでは画面に追加した要素はプログラムの変数とは別の存在になっているようで、削除の手続きをしてあげないと消えないようです。少量だと問題ないですが多くなると実行処理の負担になってたりします。なので不要になったものはきちんと削除してあげましょう。

とはいえ、例えば敵キャラを倒したりするたびにそのキャラの要素を削除する必要はないです。敵キャラなどは状態を「死」にしておいて画面外に放りだしておけばOKです。要素を削除したり新たに生成するのは結構負担が大きいようなのでメインループ内では基本使わない方が良いと思います。

要素の削除が必要になってくるのはシーンの切り替えなどの時です。例えば会話シーンなどを作ってゲーム画面に出した後にその要素をちゃんと削除せずにいるとずっとその要素は残り続けます。そしてまた別の会話シーンで要素を生成して、また別の会話シーンで・・とやっていると使った要素が蓄積されてそのうち処理が重くなってきます。

なのでシーン切り替えの時はいらなくなったシーンをしっかり削除しましょう。

function removeScene(scene){
    while(scene.firstChild){
        scene.removeChild(scene.firstChild);
    }
}

function removeScene(scene){

while(scene.firstChild){

scene.removeChild(scene.firstChild);

}

上記の関数をシーンを切り替える際に消したいシーンを引数にして呼び出してやります。これでシーン内の子要素はすべて削除できます。そして最後に

core.rootScene.removeChild(scene);

1	core.rootScene.removeChild(scene);

シーン自体も削除してやれば完了です。

こんな感じでシーン切り替えの際にシーンの子要素をすべて削除してシーンもその後に消してやればきれいさっぱり消えてなくなってくれます。

画面のフェードアウト処理【enchant.js】

2018年5月3日 / inwan / コメントする

ゲームを作っていて画面遷移時に絶対欲しいのがフェードアウト処理です。このフェードアウト処理がないと突然画面が切り替わり、あまりにも不自然に感じてしまいます。

フェードアウト処理はopacityという透明度のプロパティを使います。これは1が不透明(見える)で０が透明(見えない)です。なので簡単に説明すると黒い画像を用意してこれが透明から不透明に変わっていけばフェードアウトしていっているように見えるわけです。

サンプルプログラム

var FadeOut = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h, color) {
        enchant.Sprite.call(this, w, h);
        
        // Surface作成
        var bg = new Surface(w, h);
        bg.context.fillStyle = color;
        bg.context.fillRect(0, 0, w, h);
        // Sprite作成
        Sprite.call(this, w, h);
        this.image = bg;
        this.x = 0;
        this.y = 0;
        this.opacity = 0;
        this.isStart = false;
    },
    //フェードアウト開始初期処理(引数にシーンが必要)
    start: function(scene){
        if(!this.isStart){
            scene.addChild(this);
            this.isStart = true;
        }
    },
    //実行処理(先にstart()で初期処理しないと作動しない)
    do: function(speed){//引数：フェードアウトの速さ0.01~0.5(大きいほど速い)
        if(this.isStart){
            this.opacity += speed;
            if(this.opacity >= 1){//終わったらtrueを返す
                return true;
            }
            return false;
        }
    }
});

var FadeOut = enchant.Class.create(enchant.Sprite, {

initialize: function(w, h, color) {

enchant.Sprite.call(this, w, h);

// Surface作成

var bg = new Surface(w, h);

bg.context.fillStyle = color;

bg.context.fillRect(0, 0, w, h);

// Sprite作成

Sprite.call(this, w, h);

this.image = bg;

this.x = 0;

this.y = 0;

this.opacity = 0;

this.isStart = false;

//フェードアウト開始初期処理(引数にシーンが必要)

start: function(scene){

if(!this.isStart){

scene.addChild(this);

this.isStart = true;

}

//実行処理(先にstart()で初期処理しないと作動しない)

do: function(speed){//引数：フェードアウトの速さ0.01~0.5(大きいほど速い)

if(this.isStart){

this.opacity += speed;

if(this.opacity >= 1){//終わったらtrueを返す

return true;

}

return false;

}

});

まず、

var fadeout = new FadeOut(640, 960, 'black');

1	var fadeout = new FadeOut(640, 960, 'black');

のように画面サイズとともに色を指定してFadeOutクラスを作成します（色を指定できるようにしているので白や赤など状況によって使い分けられます）。

initializeでは指定の色とサイズのコンテキストの作成などの初期化処理をします。

startメソッドはフェードアウトを開始したい場所に書きます。

doメソッドはメインループ内に書いておきます。isStartフラグがtrueになるとフェードアウトを開始します。ループ毎に指定されたスピードでフェードアウトします。終わったらtrueを返します。

以上の方法で簡単にフェードアウトさせることができます(‘ω’)ノ

バーチャルキーパッドの作り方【enchant.js】

2018年5月2日 / inwan / コメントする

スマホ向けゲームを作っていると指でポチポチするだけの単純なゲームになりがちです(批判してるわけではないですよ。ただ類似ゲームばかり・・・)

なので今回はバーチャルキーパッドを自作します。しかも、自分で言うのも何ですが、これ結構すごいです。ブラウザ上でも同時押しとか普通にできちゃいます(私ができるようにしたわけではなく、できるということが分かっただけなんですが(^^;))。ここではenchant.jsでの作り方ですが基本ノウハウが分かれば違う環境でも簡単に作ることができると思うので興味のある方は是非読んでいってください。

ちなみに今回の内容はスマホでの使用が前提ですが、キーボードでも操作可能です。矢印キーとZ、Xキーで操作できるようにします。というか、キーボードでの操作とくっつけてしまうことが一番の肝です！！

用意するもの

方向キー用の画像とA・Bボタン用の画像を用意します。大きさは好きにしてください。私のは方向キーは300px、ボタンは150pxで作ってます。（上の画像は方向キーボタンとボタンが押された状態のものです）

各ボタンの変数

まずはバーチャルパッドではなく、キー入力から説明します。
キーの入力はGameオブジェクトのinput要素に保存されます。方向キーはinput.right、input.left、input.up、input.downにそれぞれ押したらtrue、押されていなければfalseが入ります。ボタンはちょっと違って、あらかじめ

game.keybind(90, 'a');

1	game.keybind(90, 'a');

でaボタンにキーボードのボタンを結び付けます。90はZキーのアスキーコードです。違うボタンが良ければアスキーコードを調べて変えてください(‘ω’)ノ
こっちのボタンも方向キーと同様な感じでinput.aにtrueまたはfalseが入ります。

方向入力

方向の入力を簡単に判断できるようにビット演算的な感じで上なら「0001」、右なら「0010」、下「0100」、左「1000」にして数値を当てはめます。

var KEY_UP = 1;
var KEY_UP_RIGHT = 3;
var KEY_RIGHT = 2;
var KEY_DOWN_RIGHT = 6;
var KEY_DOWN = 4;
var KEY_DOWN_LEFT = 12;
var KEY_LEFT = 8;
var KEY_LEFT_UP = 9;

var KEY_UP = 1;

var KEY_UP_RIGHT = 3;

var KEY_RIGHT = 2;

var KEY_DOWN_RIGHT = 6;

var KEY_DOWN = 4;

var KEY_DOWN_LEFT = 12;

var KEY_LEFT = 8;

var KEY_LEFT_UP = 9;

予約語的な感じで作っておくとわかりやすくてよいです。
であとは押されたボタンの数値を足すと方向が出ます。

direction = 0;
if(game.input.up){
    direction += KEY_UP;
}
if(game.input.right){
   direction += KEY_RIGHT;  
}
if(game.input.down){
    direction += KEY_DOWN;   
}
if(game.input.left){
    direction += KEY_LEFT;
}

direction = 0;

if(game.input.up){

direction += KEY_UP;

}

if(game.input.right){

direction += KEY_RIGHT;

}

if(game.input.down){

direction += KEY_DOWN;

}

if(game.input.left){

direction += KEY_LEFT;

}

あとはswitch文で分岐を作ってやればOK。これで左右同時押しなどおかしな入力は無視できます。

ボタンの判定

ボタンの判定は単純に

if(game.input.a){
    //押したときの処理
}else{
    //離した時の処理
}

if(game.input.a){

//押したときの処理

}else{

//離した時の処理

}

でOKです。ただし、完ぺきではありません。なぜかというと、いつ押したか、いつ離したか、押したままなのか、離したままなのかということが分からないからです。

なのでもう一つ、直前のボタンの状態を所持する変数を作っておきます

game.input.a_prev;

1	game.input.a_prev;

で、ボタンの処理のたびに前回はどうだったか？という分岐を書いてやると今押したのか、押したままだったのかということが分かるということです(‘ω’)ノ

バーチャルキーパッド

さて、ここからやっとバーチャルキーパッドの話になります(´∀｀)とりあえず画面の好きなところに用意した画像を表示させてください。
で、実はこれは私が最初javascriptを勉強し始めるときに読んだ田中賢一郎さんの「ゲームで学ぶjavascript入門」参考にしています。

なのでプログラムを丸パクリに書いてしまうわけにもいかないのでここはサラッと説明します(;’∀’)

まず、マウスのクリック位置のevent.x、event.yとキーパッド画像の中心からの距離を出します。そしてそれの絶対値を出します。すると下図のようなグラフで考えられるようになります。

キーパッドの中心を原点として、x座標、ｙ座標を比較してx > yなら右、y > xなら上と判断できます。で、あとはxとｙが＋かーかで左右、または上下の判断をします(わかるかな(^^;))
ちなみに、この方法だと2x > yとか2y > xとかの条件で8方向も簡単に作れます。

バーチャルキーパッドをキー入力に合わせる

で、最後にバーチャルパッドをキー入力に合わせるようにします。そうするとキー入力の処理のプログラムを書くだけで済みます。

a_button.addEventListener(enchant.Event.TOUCH_START, function(event){//タッチスタート
    game.input.a = true;
});
a_button.addEventListener(enchant.Event.TOUCH_END,function(event){//タッチエンド
    game.input.a = false;
});

a_button.addEventListener(enchant.Event.TOUCH_START, function(event){//タッチスタート

game.input.a = true;

});

a_button.addEventListener(enchant.Event.TOUCH_END,function(event){//タッチエンド

game.input.a = false;

});

こんな感じで単純にaボタンがクリックされたらキーボード入力の対応ボタンをtrueにしてやるだけです。タッチエンドでfalse。
方向キーの場合はTOUCH_MOVEでも入力できるようにしておくとグリグリ操作できるようになります(´∀｀)
あ、あと押した方向キーが分かるようにボタンが光るようにするには、ボタンが一つ押された画像を用意して押されたボタンごとにrotationで角度を変えてやると全方向の画像を用意しなくても済みます。

と、こんな感じで私は自分のバーチャルキーパッドを作ってみました(*´ω｀)興味のある方は一度お試しくださいまし。

あとがき

enchant.jsではスマホで2か所同時にタッチすることはできないので、こういうキーパッドでの入力はうまくいかないと思っていました(enchant.jsでキーパッド使ってるゲーム見たことない・・)。なのでただ単純にポチポチして遊ぶスマホゲームみたいなものしか作らないと思ってました。
ところが「秘密警察ギャボリン第二話」の開発中に遊んでるときに「ダッシュボタン」を押しながら「ジャンプボタン」がしっかり反応することを発見！！！「いけるやん！！( *´艸｀)」ってテンション上がって自作でバーチャルキーパッドを作ってしまいましたとさ。めでたし、めでたし。。
ということです（笑）