「tmlib.js 怒濤の 100 サンプル!!」を試す その7

その7になります。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「基礎」のラスト、「canvas を画面にフィットさせよう(解像度は固定)」です。
サンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。

またまた前回と同じくサンプル画面のいっぱいに黒色で塗りつぶされたと思います。
しかし今回の違う所は解像度が固定という所です。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);

// 画面にフィットさせる
canvas.fitWindow();

// 背景色を指定
canvas.clearColor("black");
});

4行目、5行目で「 SCREEN_WIDTH 」「 SCREEN_HEIGHT 」という定数を設定されていますね。
画面の横幅と高さの設定を後々管理しやすいようにするためです。
その定数を用いて12行目で画面の横幅と高さを指定してます。

「canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);」
||
「canvas.resize(465, 465);」

ということですね。
後に横幅や高さを変更することになっても定数に指定している数値を変更するだけですので楽チンですし不具合の可能性を減らすことが出来ます。
画面の横幅と高さを指定したcanvasに対して「.fitWindow() 」で表示されている画面にフィットさせています。
イメージが湧きにくいですが、拡大して画面に合わせているという感じです。
上手く説明出来ないのは自分でもきちんと理解出来ていないからでしょう…

違っていたら修正します。

————– 追記 ——————-

phi さんよりコメントで詳しく補足を頂きましたのでそのまま記載しました。

 

.resizeWindow() で画面いっぱいにすると画面の解像度分ピクセルの更新が行われます. その分, 描画はキレイになりますが負荷も高くなります.

一方 .fitWindow() の場合, ピクセル数を維持した状態で画面いっぱいに表示するので負荷はほぼ変わりません.
その分解像度の高い端末では描画が荒くなってしまいますが…

ですが, 画面幅, 高さを維持した状態(サンプルでは465, 465)で開発が可能になるのでPC, スマートフォン同時対応したい場合などは .fitWindow() を使うと同じコードで同じように表示できるので開発効率が良かったりします.


「tmlib.js 怒濤の 100 サンプル!!」を試す その7」への2件のフィードバック

  1. .resizeWindow() で画面いっぱいにすると画面の解像度分ピクセルの更新が行われます. その分, 描画はキレイになりますが負荷も高くなります.

    一方 .fitWindow() の場合, ピクセル数を維持した状態で画面いっぱいに表示するので負荷はほぼ変わりません.
    その分解像度の高い端末では描画が荒くなってしまいますが…

    ですが, 画面幅, 高さを維持した状態(サンプルでは465, 465)で開発が可能になるのでPC, スマートフォン同時対応したい場合などは .fitWindow() を使うと同じコードで同じように表示できるので開発効率が良かったりします.

    • 上手く表現出来なかった所の補足ありがとうございます。
      拡張と拡大という感じに曖昧に認識してたのがスッキリしました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です