RSS

TyranoScriptで作ったゲーム画面を画面中央に表示

08 6月

TyranoScriptで作ったゲームをブラウザ全画面もしくはPhonegapでアプリ化した後実行すると、
Config.tgsでScreenRatio=fixにしていると
(多分)仕様で画面左端によってしまって右端に何もないスペースが出来てしまう。

fitにすると今度は縦横比率が崩れてしまって、
iPhone5で見たりAndroidで見た時にデバイスの縦横幅にやられてゲーム内のキャラが潰れたりしてしまう。

tyrano.base.js見た感じだとfixとfitしか用意されてないご様子。
ここに自分で固定にするように追加しても良かったけども、
そうなると今度はTyranoScriptを更新したりするときマージが面倒だなあと。

で、対応した方法。

外ガワ用のHTMLを用意して、そこにiframeでゲームを表示する。
CSSでiframeのコンテンツを中央寄せにする。
これで行けました。

HTML

        <div class="main">
            <div class="container">
                <iframe src="./tyrano/index.html" scrolling="no" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
            </div>
        </div>

CSS

body
    {
     margin:0px;          
     padding:0px;         
     text-align:center; 
     background-image: url(../img/wall.jpg); /** 背景画像 */
     background-repeat: repeat;
    }

#main
    {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width:80%;         /* 幅を決定する */
    }

.container {
  position: relative;
  padding-bottom: 66%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.container iframe {
  position: absolute;
  top:0px;    /** 上はぴったり*/
  left: 10%;
  right:10%;
  width: 80%;
  height: 80%;
}

背景画像はこの間作った木目の画像を繰り返し表示できるように加工した画像を当ててます。

デバッグ画面

もしかしたらもっと簡単な方法があったのかもしれないけど
やりたいことが出来たので良し!

お疲れ様でした。

広告
 
コメントする

投稿者: : 2015/06/08 投稿先 CSS, HTML, tyranoscript

 

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。