39
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Electronでゲーム開発はできるのか(ブロック崩しもどき)

Last updated at Posted at 2015-05-27

ElectronでJSのゲームライブラリがサクサク動くかテストしてみました。
動くならパソコンのゲーム(exe,app形式)が作れる。

インストールや、基礎的な部分は以下の記事を参考にしました。
「Electronでアプリケーションを作ってみよう」
http://qiita.com/Quramy/items/a4be32769366cfe55778

##結果
ぬるぬる動いた。スマホのWebviewの悪いイメージがあり、どこまで重いのに耐えられるかはわからないけれど、それは今後の研究課題かな。まーChromiumの方がずっと処理能力が高い気はしている。

1483.gif

Electronすごい、Chromiumすごい。

##実行環境
・Electron
・enchant.js(pixi.jsやcocos2d-jsでもOK)

##実行イメージ
フォルダのルートに以下のファイルが並ぶ
・package.json
・index.js
・index.html
・enchant.js
・main.js
・ゲームに使う画像

1 . package.jsonがindex.jsを呼ぶ。
2 . index.jsがindex.htmlを表示させる
3 . ここから先はWebと同じようにindex.htmlに作る

##github
https://github.com/hp0me/electron_gametest

##ブロック崩し部分
テストで作りたかったのでアルゴリズムとかはショボい。
enchant.jsでブロックと、プレイヤーと、ボールのクラスを作った感じ。
ブロック崩し作ったことなかったんだけどブロックに当たった時の速度の反転方法はちと考えなきゃいけなさそうだ。(今回は割愛)

main.js
enchant();

window.onload = function(){
    var winSize = [320,320];
    var game = new Core(winSize[0],winSize[1]);
    var gameOverOnce = 0;
    game.fps = 60;
    game.preload("ball.png","block.png","board.png");

    var ball,player;
    var blocks = [];

    game.onload = function(){


        var Ball = enchant.Class.create(enchant.Sprite, {
            initialize: function(x, y) {
                enchant.Sprite.call(this, 15, 15);
                this.x = x;
                this.y = y;
                this.vel = [5,5];
                this.scale(1,1);
                this.image = game.assets['ball.png'];
                game.rootScene.addChild(this);
                this.addEventListener('enterframe', function() {
                    this.move();
                    this.collision();

                });
            },
            move:function(){
                this.x += this.vel[0];
                this.y += this.vel[1];
            },

            //当たり判定
            collision:function(){
                if(this.intersect(player)) {
                    this.vel[1] *= -1;
                }

                if(this.x < 0 || this.x > winSize[0]){
                    this.vel[0] *= -1;
                }

                if(this.y < 0){
                    this.vel[1] *= -1;
                }

                if(this.y > winSize[1]){
                    if(gameOverOnce == 0)alert("gameover");
                    gameOverOnce = 1;
                }

                for(var i = 0; i<blocks.length;i++){
                    if(this.intersect(blocks[i])) {
                        game.rootScene.removeChild(blocks[i]);
                        delete(blocks[i]);
                        this.vel[0] *= -1;
                        this.vel[1] *= -1;
                    }
                }

            }

        });

        var Player = enchant.Class.create(enchant.Sprite, {
            initialize: function(x, y) {
                enchant.Sprite.call(this,105, 15);
                this.x = x;
                this.y = y;
                this.speed = 4;
                this.vel = [1,1];
                this.scale(1,1);
                this.image = game.assets['board.png'];
                game.rootScene.addChild(this);
                this.addEventListener('enterframe', function() {
                    if (game.input.right) {
                        this.x += this.speed;
                    }
                    if (game.input.left) {
                        this.x -= this.speed;
                    }
                });
            }

        });

        var Block = enchant.Class.create(enchant.Sprite, {
            initialize: function(x, y) {
                enchant.Sprite.call(this,35, 15);
                this.x = x;
                this.y = y;
                this.scale(1,1);
                this.image = game.assets['block.png'];
                game.rootScene.addChild(this);
            }

        });



        ball = new Ball(30,130);
        player = new Player(100,300);

        for(var x=0;x<7;x++){
            for(var y=0;y<5;y++){
                var block = new Block(x*40 + 20,y*20 + 10);
                blocks.push(block);
            }
        }

    };
    game.start();
};

##まとめ
軽く動かす程度ならつまずく要素がほとんどない。
スマホのWebviewと同じでネイティブ使いはじめると面倒なことになりそう。
exeやappにするならそもそもUnityの方が早い、など諸々考えどころはあるが面白そうだ。

##結論
Electronでゲーム開発はできる。(一応)

39
41
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?