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

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

このテンプレートでは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);//得点表示
        });
    },
});

あとがき

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

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

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