オレンジブログ

オレンジブログ

自作ゲームについてとか色々

【enchant.js】自作のブラウザゲームをレンタルサーバーで公開する方法①

JavaScript enchant.js ゲーム制作

自分でゲームを作って公開したい！！と言う方は多いと思いますが(多いのかな？)
せっかく作ったのなら多くの方にプレイして欲しいですよね。
そうなると今の時代、PCゲームよりもスマートフォンで遊べるゲームの方が手軽に遊べるので、せっかくならスマホで遊べるゲームを作りたい！！と考えたりもしますよね。

しかしAppストアやGooglePlayでリリースするのはちょっと大変...という方も多いと思います。私もそうです。
そういう時に便利なのがブラウザゲームです。Android、iPhone等のスマホだけでなく、PCにも対応しているのが魅力です。
こういった理由でブラウザゲームを作りたい or 作った方は多いのではないでしょうか？

ですが、これらのゲームも公開しなければプレイしてもらえません。
幸いHTML5 + JavaScriptで作ったゲームは「9leap」さんで公開することができます。
なので、9leapさんで公開しても良いよ〜って方はそちらで公開するのが一番です。

でも中には自分のサーバーにアップロードしたいという方もいると思います。
私もその中のうちの1人で、ゲーム公開サイトに投稿せず、ひっそりと公開したい派でした。

今回はそんな方向けに、enchant.jsで作ったゲームをレンタルサーバーで公開する方法を記事にしたいと思います。
今でもenchant.jsを使っている方(いるのだろうか...)で、サーバーへのアップロードの方法が知りたい方は是非この機会に知っておきましょう！

◆注意◆ このページでは「enchant.jsの説明」 〜 「ゲーム作成」までをまとめています。
実際にレンタルサーバーを借りてゲームをアップロードする方法は次回の記事で紹介しています。
既に公開するゲームが完成していると言う方は次回の記事から読んでも問題ありません。
orangelily.hatenablog.com

そもそもenchant.jsってなんぞや？


そもそもの話ですよね笑。お前はいったい何者なんだと。

f:id:orangeLily:20200730170156p:plain:h200
enchant.js

enchant.js(えんちゃんとじぇいえす)とは、HTML5 + JavaScriptを用いたフレームワークです。端的に言うとゲームエンジンですね。
PC、スマホどちらでも動くゲームを作れるマルチプラットフォームなのが魅力です。

現在アップデートやサポートが行われていないので、他のゲームエンジンを使い始めている人も増えていますが、今でも使いやすいゲームエンジンとして愛用している方も多いです。

たまにリンク切れの公式サイトを紹介されているサイトも多くてダウンロードに困った方もいるかもですが、以下のURLからサンプルごとダウンロードできます。
github.com

どういうゲームが作れるの？

ぶっちゃけ何でも作れます(ぶっちゃけすぎ)

ブラウザ上で動かすゲームですので、容量が大きくなってしまうゲームや高いパフォーマンスが必要なゲームは厳しいです。
ミニゲームレベルのアクションゲームやシューティングゲームあたりが一番向いていると思います。

参考程度に、私の作ったゲームがこの２つです。
orangelily.hatenablog.com
orangelily.hatenablog.com

他にも9leapさんで公開されいてるゲームをプレイしてみると、何となくどのようなゲームが作れるかわかると思います。

enchant.jsで公開するゲームを作る

ゲームを作る準備

enchant.jsで作ったゲームを公開するためには、まずはゲームそのものが完成しないといけません。
まずはゲームデータを入れるプロジェクトフォルダを好きな名前で作りましょう。わかりやすい名前が良いです。
試しに私は「TestEnchant」というフォルダを作りました。
f:id:orangeLily:20200727145322p:plain
そしてそのフォルダに必要なファイルを入れていきます。
enchant.jsでゲームを作るためには、最低限以下のファイルが必要になります。

  • index.html(作ったゲームを置くページ)
  • enchant.js(enchant.jsを使ってゲームを作るのに必要なソースファイル)
  • game.js(ゲームのソースコード。名前は何でもいい)

enchant.jsのソースファイルは上で紹介したURL(こちら)からダウンロードできます。
ダウンロードしたファイルを解凍するとbuildフォルダの中にenchant.jsファイルが存在します。

enchant.js-builds-master/build/enchant.js

enchant.jsファイルをコピーして先ほど作ったプロジェクトフォルダに貼り付けます。
f:id:orangeLily:20200730140556p:plain

次にプロジェクトフォルダの中に「index.html」ファイルを作成しましょう。
f:id:orangeLily:20200730140709p:plain

htmlファイルの作り方がわからなければ以下のURLを参考にしてください。
HTMLファイルを作成する－ウェブ制作チュートリアル

index.htmlファイルを以下のように編集します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="IE=Edge" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta
            name="apple-mobile-web-app-status-bar-style"
            content="black-translucent"
        />
        <!--ゲームタイトルは好きな名前に変える-->
        <title>GameTitle</title>
        <script type="text/javascript" src="enchant.js"></script>
        <!--プラグインが必要な場合はコメントアウトを外す
        <script type="text/javascript" src="build/plugins/nineleap.enchant.js"></script>
        <script type="text/javascript" src="build/plugins/ui.enchant.js"></script>
        -->
        <!--game.jsのファイル名は自分の作ったゲームのソースコードのファイル名と同じにすること-->
        <script type="text/javascript" src="game.js"></script>
        <style type="text/css">
            body {
                margin: 0;
            }
        </style>
    </head>
    <body></body>
</html>

15〜18行目の部分は、自分の使うプラグインによってコメントアウトを消してください。プラグインを使わないのであればこのままで大丈夫です。

このhtmlファイルは最低限必要なことしか書いてありません。
ゲームを置くページにゲームタイトルや操作方法を記述したい場合は、htmlの編集方法を調べて追加してください。

最後にgame.jsファイルを作ります。

f:id:orangeLily:20200730140944p:plain

このファイルには、ゲームのプログラムを書いていきます。このファイルがメインで編集する部分ですね。

ゲーム作成

enchant.jsでの開発ですが、ゲームの開発自体はサンプルを参考にしたり調べながら作ればできると思うので詳しくは割愛します。

ソースコードを編集する際ですが、VSCodeが使いやすいのでオススメです。

Visual Studio Code – コード エディター | Microsoft Azure

使い方等は調べたらわかりやすく説明しているサイトが出てくるので、それらを参考にしてください。とりあえずはJavaScriptとhtmlが使えるようになれば良いでしょう。


今回私は、画面をタッチしたら熊がその位置にワープするゲームを作りました。
熊の画像はサンプルにも使われているこちらを使いましょう。

f:id:orangeLily:20200727155901p:plain
chara1.png

ダウンロードしたらファイル名を「chara1.png」にして、プロジェクトフォルダの中に移動させます。
f:id:orangeLily:20200730141017p:plain

次にgame.jsの中を編集します。
私が書いたソースコードは以下の通りです。

enchant(); //enchant.jsを使うための命令。これがないとenchant.jsの機能を使えない

//HTMLのロードが完了したときに実行する関数
window.onload = function () {
    //ゲーム画面
    game = new Game(320, 320);
    //フレームレート
    game.fps = 15;
    //熊の画像読み込み
    game.preload("chara1.png");
    //画像などを読み込んだ後の処理
    game.onload = function () {
        //熊を生成
        var bear = new Sprite(32, 32);
        //座標を真ん中に
        bear.x = 160;
        bear.y = 160;
        //画像指定
        bear.image = game.assets["chara1.png"];
        //熊を表示
        game.rootScene.addChild(bear);
        //画面をタッチした時の処理
        game.rootScene.addEventListener("touchstart", function (touch) {
            //熊をタッチした位置に移動
            bear.x = touch.x;
            bear.y = touch.y;
        });
        //背景色設定
        game.rootScene.backgroundColor = "rgb(150, 200, 255)";
    };
    //ゲームを動かす
    game.start();
};

ゲームと言えるか怪しいレベルのものですが...テストプレイなので許してください笑。

まだサーバーにアップロードしていないですが、この状態でindex.htmlをGoogleChrome等で開いてみると動くはずです。

くまちゃん

実際に自分で起動して遊んでみましょう！クリックした場所に熊がワープしたら成功です！！何も楽しくないですね！！

これでゲームが完成しました。

それでは次回は公開方法についてです。
orangelily.hatenablog.com