作ったゲームをmonacaでスマホアプリにする方法

2019年5月16日

enchant.jsで作ったゲームをアプリ化する方法があるのでご紹介。たぶんenchant.js以外でもブラウザゲームならだいたいいけると思います(試してはいない)。

1 Monacaってなに？
2 ファイルをアップロード
3 CSSで表示域の調整をする
4 CSSの修正
5 まとめ

Monacaってなに？

まず、M onacaというハイブリッドアプリを作れるサービスがあります。

ハイブリッドアプリとは基本的にウェブの技術(HTMLとかCSS、Javascriptとか)で作ったアプリらしいです。ただ、基幹部分はスマホでの開発の能力も必要になってくるんですが、その基幹部分をやってくれるサービスがMonacaです。なのでこちらはHTMLやjavascriptでつくったものを用意するだけでOKです。

今回は作ったゲームをアプリ化するだけなのでMonacaの細かい機能については触れません。ていうか私も知らん(^^;)。けっこういろんなことができるらしいです。

あと、MonacaはCordovaというものがベースになっているらしいので気になる方はそちらも調べてみてください(‘ω’)ノ

ファイルをアップロード

じゃ、さっそくアプリ化しちゃいましょ(‘ω’)ノあ、アカウントは作ってね。

まず新しいプロジェクトを作ります。

作るのは一番右の最小限のテンプレートでOKです。

そしたらクラウドIDEを開いて

WWWフォルダにファイルをアップロードします。アップロードは上の小さいアイコン(見づらい(^^;))を押すとアップローダーが開きます。

アップロードするときはindex.htmlはアップしないでください。もともとあるindex.htmlを消してしまうとこまるので気を付けてください。

で、wwwフォルダ内にあるindex.htmlファイルを開いて必要な分だけコピペします。

CSSで表示域の調整をする

これで右側にある画面にゲームが表示されていると思います。ただ、表示されているものが画面と合っていないと思います。

なのでCSSで画面にぴったりに合うように調整します。

<style type="text/css">
body { 
    margin: 0;
    padding: 0;  
    background-color: pink;
}
#enchant-stage {
  height: 90vh;
  width: 64vh;
  margin-left: calc((100vw - 64vh)/2);
  margin-top: calc(100vh - 90vh);
}
@media screen and (max-width:600px) {/*600px以下の場合*/
  #enchant-stage {
    height: 141vw;
    width: 100vw;
    background-color: black;
    margin: 0;
    margin-top: calc((100vh - 141vw)/2);
  }
}
</style>

index.htmlに直接これを貼りつけちゃってください。たぶんだいたい良い感じに表示されていると思います。

CSSの修正

まず背景がピンクになっていると思いますがもちろんワザとです(^^;)

body内の

background-color: pink;

のpinkの部分を好みの色に変えればOKです。面倒臭ければblackやwhiteでもいいと思います。

次に画面のサイズなんですが、私は640×900で画面を作っています。なのでもし同じなら問題ないですが違う場合は変更が必要になります。

で、まず

@media screen and (max-width:600px) {/*600px以下の場合*/

の方を見てください。これは画面が600px以下の場合に適用されるCSSです。iPad Proには適用されません。

で、この中のheight、widthに注目！この２つでゲーム画面のサイズを指定してるわけですが単位がvwとなっています。

vwは幅を基準にした単位で100vwで幅100％の意味になります。なのでwidthは100％で良いんですがなぜheightが141vwなのか？

これは幅を基準に高さを決めているからです。そして私の640×900と同じ割合にすると141vwになったわけです。なのでここを自分が作ったゲーム画面の比率に合わせて変えてやればOKです。

もう一つ

margin-top: calc((100vh - 141vw)/2);

これは縦の中央寄せができなくて試行錯誤した際に出来た技です(^^;)

vhは先ほどあったvwの高さ版で、100vhで高さ100％になります。で、私の例でいうと今ゲーム画面の高さは141vwとなっています。この141vwとスマホ画面の高さ100vhの差が通常であればゲーム画面下の余白になります。なのでそれの半分を上のマージンとしてやればちょうど真ん中に来てくれるということです。

上の方のenchant-stageはiPadPro向けのCSSです(まぁ私apple製品もってなくてアプリ作れないから関係ないんですけど(^^;)なんか気になったので)。そしてこれは広告表させるためにサイズを少し小さくしています(広告の話はまた別に書きます)。内容は先ほどと同じ原理なので必要なら修正してください(‘ω’)ノ