Help us understand the problem. What is going on with this article?

phinajsでゲームアプリをあるdivの大きさに合わせて表示する.

More than 1 year has passed since last update.

問題

phinajsのCanvasApp(ないしGameApp)のfitプロパティをtrueにするとウィンドウ全体がゲーム画面になる.

しかしrunstart.comで作っている時のように,ある特定のdiv要素の大きさにフィッテイングしてもらいたい時もある.

この時に自分で適当なdiv要素で括ったcanvasを用意して,そこにCanvasAppを作成して,fitをtrueにすれば上手く行くかというとそうではなかった.

というのも,phinajsのフィッティングをする関数ではwindowのinnerHeightの値を用いているので,どのようなdivの構造にしてもウィンドウ全体をゲーム画面が覆ってしまうのだ.

また,CanvasAppのinitにおけるwidthとheightは数字でないとdefaultの値になってしまうのでwidth:"100%"のような指定は出来ない.

自分の解決法

解決法は以下のように, CanvasAppのfitオプションをfalseにして Canvasapp内のcanvasのwidth,heightの値をそれぞれ100%,autoに変更することである.

heightをautoにするとcanvasのアスペクト比が保存されて拡大縮小してくれるのだけど,どうしてそうなるのか理由がよく分からないので誰か教えてください.

example.js
 // メイン処理
 phina.main(function() {
     // アプリケーション生成
     let app = GameApp({
         startLabel: 'main', // メインシーンから開始する
         assets: ASSETS,
    //html側でphinaCanvasというidを持ったcanvasをお望みの位置に用意する
         domElement: document.getElementById("phinaCanvas"),
         width:640,
         height:960,
         fit: false 
     });

     //appをinitした時点でwidthとheightが決まってしまうので書き換える
     //尚,widthとheightを書かない場合default値になってしまう

     let s = app.canvas.domElement.style;
     s.width = "100%";
     //高さ方向は,アスペクト比を揃える為に,autoを使っている.
     //なんか知らんけどautoを指定すると内在サイズという概念にのっとって
     //アス比一定で大きさが変わるらしい
     //自分が読んだサイトは→ http://www6.plala.or.jp/go_west/nextcss/ref/article/calc_v.htm
     s.height = "auto";

     // アプリケーション実行
     app.run();
 });
example.html
<div class="mainRow">
    <div id="anotherDiv" class="mainContents"></div>
    <div id="phinaDiv" class="mainContents">
        <canvas id="phinaCanvas" class="mainContents"></canvas>
    </div>
</div>
example.css
.mainRow{
 width: 100%;
}

.mainContents {
    float: left;
}

#phinaDiv {
    height: 50%;
    width: 40%;
}

#anotherDiv {
    height: 480px;
    width: 600px;
}

こうすると,phinaDivの幅に合わせてcanvasの大きさが変化してくれる.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away