【解決】低解像度のゲームを作りたい

[eiten]

レトロなドット絵をレトロなドットらしく管理するにはゲームの解像度設定を小さくして作るのが一番確実だと考えているのですが
そうすると遊ぶ際にとても視認性が低くなり、プレイ中にウィンドウサイズを大きくするとドットが滲んでしまいます。
現在、YEP_coreEngineで画面解像度を変更しています。

プレイ中にウィンドウサイズを変えても滲まない(ジャギーが出てもかまわない)ようにするための方法を教えてください。

※低解像度素材を拡大して使う方法も試しましたが、結局ウィンドウサイズが変われば滲みますし、半ドットな動きをしてしまうので理想とは程遠かったです。

[eiten]

すこし説明が下手でしたでしょうか・・・
わかりやすいよう画像をそえてみます。

a.png (13.54 KiB) 閲覧数: 9100 回

a2.png (30.95 KiB) 閲覧数: 9100 回

目標は
　●デフォルトで2～4倍(整数)の表示
　●ウィンドウやテキスト、ピクチャの表示も同じく拡大される
　●すべてのシーンで拡大され続ける

既存のマップズームプラグインはマップのみ拡大されウィンドウやフォント、その他のシーンは拡大されません。
手動でのウィンドウサイズ調整は例え2倍や3倍のような整数の倍率でもぼやけてしまいます。

※画像に使用したプロジェクトのウィンドウサイズはゲームボーイのドット数と同じサイズです

[剣崎 宗二]

その「滲んでいる」背景画像はイベントコマンド「ピクチャの表示」で貼っている物で宜しいでしょうか？
そうであれば、

コード: 全て選択

ImageManager.loadPicture = function(filename, hue) {
    return this.loadBitmap('img/pictures/', filename, hue, false);
};


をプラグインとして追加してみて、お望みとおりの効果が出るかお試しください。

そうでないのであれば、画像を表示するのに使用したコマンド或いはプラグインを教えてください。

[eiten]

その「滲んでいる」背景画像はイベントコマンド「ピクチャの表示」で貼っている物で宜しいでしょうか？
そうであれば、

コード: 全て選択

ImageManager.loadPicture = function(filename, hue) {
    return this.loadBitmap('img/pictures/', filename, hue, false);
};


ピクチャ表示のスムース除去は既に取り入れており、実際に正しく動作することを確認しています
しかし、これはピクチャそのものにしか効果がなく、ゲーム画面全体に補完がかかってしまう"内部解像度と同値でないウィンドウサイズ時の画面表示"は改善されませんでした

そうでないのであれば、画像を表示するのに使用したコマンド或いはプラグインを教えてください。

先程のスクリーンショットに使ったプロジェクトで背景画像表示に影響するプラグインは
トリアコンタン様の多層レイヤー一枚絵マッププラグイン
https://triacontane.blogspot.jp/2017/09/blog-post.html
を使用しています

しかしながら、解像度変更プラグイン以外のプラグインが有効になっていない新規プロジェクトでも、ウィンドウサイズが内部解像度と同値でない時に先のスクショのように画面全体がバイリニア補完されてしまいます

[剣崎 宗二]

ちょっと以下のどっちの状況か分からなかったのですが、
「スムーズ処理はピクチャにしか及ばず、他（背景画像など）も滲まないようにしたい」のか
それとも
「スムーズ処理を消したピクチャも、ウィンドウサイズを変えると滲む」のか。

前者の場合画像類に関しては、バイリニア補正を掛けているのは各々の画像のsmooth処理で御座いますので、ピクチャ以外の各ImageManager画像のsmoothを片っ端からfalseにするのが正道だと思います。

簡略化したい場合は

コード: 全て選択

ImageManager.loadBitmap = function(folder, filename, hue, smooth) {
    if (filename) {
        var path = folder + encodeURIComponent(filename) + '.png';
        var bitmap = this.loadNormalBitmap(path, hue || 0);
        bitmap.smooth = false;
        return bitmap;
    } else {
        return this.loadEmptyBitmap();
    }
};

と、smoothパラメーターを無視し強制スムーズオフを背景など含む全画像に対し実行するのが宜しいかと。



後者の場合はpixi.js内

コード: 全て選択

var SCALE_MODES = exports.SCALE_MODES = {
  DEFAULT: 0,
  LINEAR: 0,
  NEAREST: 1
};

のDEFAULTを0から1にしてみてください。
但し私は素材がなくこれを試した事はない為、自己責任で、バックアップをとった後に行ってください。

[奏ねこま]

ブラウザのサイズに応じて画面が拡大縮小するのは、pixi.jsの能力ではなく、ブラウザの挙動です。
ぼやける（アンチエイリアス、スムージング）のもブラウザの仕様ですし、無効にする方法があるとすれば
CSSなどでブラウザの表示条件を設定することになるのではと思います。

偉そうに言っておいてなんですが、私はこのあたり詳しくはないので、具体的な対応策はご提示できません。
気が向いたら調べてみようかと思いますが、期待はしないでください。

「ブラウザ 画像 拡大 アンチエイリアス」などで検索したら何か見つかるかも？

[剣崎 宗二]

ぼやける（アンチエイリアス、スムージング）のもブラウザの仕様ですし、無効にする方法があるとすれば

これについての補足なのですが、pixi.jsの描画はcanvas或いはwebGLを通してホームページ自体に描画しています。なので、ブラウザの挙動と言うのも完全に間違いではないのですが…
それではnw.js（純粋なブラウザではない）によるものである「テスト時に」発生する説明がつかないかと…

また、pixi.js内で関連の指定ができる事も説明がつかないかと考えます…



そして、申し訳ありません。先ほどまで見ていたpixi.jsが古いバージョンの物だったようです。
修正すべきは正しくはこちらになります。

コード: 全て選択

  /**
   * The scale modes that are supported by pixi.
   *
   * @static
   * @memberof PIXI.settings
   * @type {PIXI.SCALE_MODES}
   * @default PIXI.SCALE_MODES.LINEAR
   */
  SCALE_MODE: 0,

こちらの0を1にします。




尚、（参考までに）関連すると考えられるpixiのfunction（ウィンドウを拡大縮小させた際）は以下となります。

コード: 全て選択

CanvasRenderer.prototype.resize = function resize(screenWidth, screenHeight) {
        _SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight);

        // reset the scale mode.. oddly this seems to be reset when the canvas is resized.
        // surely a browser bug?? Let pixi fix that for you..
        if (this.smoothProperty) {
            this.rootContext[this.smoothProperty] = _settings2.default.SCALE_MODE === _const.SCALE_MODES.LINEAR;
        }
    };

[eiten]

いただいた助言を元にいろいろ試してみました。
結果を先にいうと相変わらず補完がかかったままです。

ちょっと以下のどっちの状況か分からなかったのですが、
「スムーズ処理はピクチャにしか及ばず、他（背景画像など）も滲まないようにしたい」のか
それとも
「スムーズ処理を消したピクチャも、ウィンドウサイズを変えると滲む」のか。

スムーズ処理を変えたピクチャもウィンドウサイズを弄ると滲みます
背景やタイルセットやキャラチップもウィンドウサイズが変わると滲むのでそれを防ぎたいです
今のところ「滲まない画像」と「滲んでしまった画像」が混在した状態には”なっていません”。

前者の場合画像類に関しては、バイリニア補正を掛けているのは各々の画像のsmooth処理で御座いますので、ピクチャ以外の各ImageManager画像のsmoothを片っ端からfalseにするのが正道だと思います。

簡略化したい場合は

コード: 全て選択

ImageManager.loadBitmap = function(folder, filename, hue, smooth) {
    if (filename) {
        var path = folder + encodeURIComponent(filename) + '.png';
        var bitmap = this.loadNormalBitmap(path, hue || 0);
        bitmap.smooth = false;
        return bitmap;
    } else {
        return this.loadEmptyBitmap();
    }
};

と、smoothパラメーターを無視し強制スムーズオフを背景など含む全画像に対し実行するのが宜しいかと。



後者の場合はpixi.js内

コード: 全て選択

var SCALE_MODES = exports.SCALE_MODES = {
  DEFAULT: 0,
  LINEAR: 0,
  NEAREST: 1
};

のDEFAULTを0から1にしてみてください。
但し私は素材がなくこれを試した事はない為、自己責任で、バックアップをとった後に行ってください。

そして、申し訳ありません。先ほどまで見ていたpixi.jsが古いバージョンの物だったようです。
修正すべきは正しくはこちらになります。

コード: 全て選択

  /**
   * The scale modes that are supported by pixi.
   *
   * @static
   * @memberof PIXI.settings
   * @type {PIXI.SCALE_MODES}
   * @default PIXI.SCALE_MODES.LINEAR
   */
  SCALE_MODE: 0,

こちらの0を1にします。




尚、（参考までに）関連すると考えられるpixiのfunction（ウィンドウを拡大縮小させた際）は以下となります。

コード: 全て選択

CanvasRenderer.prototype.resize = function resize(screenWidth, screenHeight) {
        _SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight);

        // reset the scale mode.. oddly this seems to be reset when the canvas is resized.
        // surely a browser bug?? Let pixi fix that for you..
        if (this.smoothProperty) {
            this.rootContext[this.smoothProperty] = _settings2.default.SCALE_MODE === _const.SCALE_MODES.LINEAR;
        }
    };

pixi.jsやrpg_managers.jsを書き換えて見ましたが、ウィンドウサイズ変更時に期待した結果は得られませんでした。



以下、現状の再報告です

160x144.PNG (7.82 KiB) 閲覧数: 8901 回

現在はこの画像の通り、ピクチャの回転や拡縮によるスムースは除去できています
設定した解像度のままのウィンドウサイズでなら綺麗に表示されています

160x144to320x288.PNG (31.73 KiB) 閲覧数: 8901 回

しかし、このままでは遊び難いので、旧作ツクールや昨今のレトロ風味のドット洋ゲーのようにウィンドウサイズを大きくしたいのですが、画面全体に補完がかかってしまいドット感が損なわれてしまいます
拡大する前と比較してピクチャのスムース除去は生きていているのは解りますが、最後にまとめて補完が掛けられたような感じになっています。

[eiten]

進展というわけではありませんが
ウィンドウサイズを変えた際の画面引き伸ばしサイズを司る場所を見つけました
Core.jsの2363行あたりの記述が画面サイズを変動させていました

コード: 全て選択

Graphics._updateRealScale = function() {
    if (this._stretchEnabled) {
        var h = window.innerWidth / this._width;
        var v = window.innerHeight / this._height;
        this._realScale = Math.min(h, v);
    } else {
        this._realScale = this._scale;
    }
};

上を下の通り改変させればウィンドウ枠をどんなに動かしても1倍表示に固定できます

コード: 全て選択

Graphics._updateRealScale = function() {
    if (this._stretchEnabled) {
        var h = 1;//window.innerWidth / this._width;
        var v = 1;//window.innerHeight / this._height;
        this._realScale = Math.min(h, v);
    } else {
        this._realScale = this._scale;
    }
};

また下の通り書き換えれば最小1倍から整数倍にのみリサイズ出来るようになります

コード: 全て選択

Graphics._updateRealScale = function() {
    if (this._stretchEnabled) {
        var h = Math.max( 1, parseInt(window.innerWidth / this._width));//1以上の小数点を排除した数値を出す
        var v = Math.max( 1, parseInt(window.innerHeight / this._height));//1以上の小数点を排除した数値を出す
        this._realScale = Math.min(h, v);
    } else {
        this._realScale = this._scale;
    }
};

これはドットゲー実現のための大きな一歩ですが、相変わらず拡大時には滲んだままです。
引き続き調査を続けます

[剣崎 宗二]

うーん。とすると奏ねこまさんの言っていた方が正しいのかもしれませんね。
nw.jsのブラウザエンジンはchrome 系というのを昨日見たので…

コード: 全て選択

canvas {
  image-rendering: pixelated;
}

Index.htmlにstyleタグを設けてこれを入れて見てください。