【解決済み】スクリプトに詳しい方から助言いただきたいのですが

[にゃたま]

こんばんは。

スクリプトについて無知なもので教えていただきたいと思います。
タイマーの上にTIMEテキストを追加したく
自作プラグインでSprite_Timer.prototype.createBitmapを
オーバーライドしてみたのですが以下のコードのように
new Bitmap()でビットマップを新規作成するだけでは
テキストを追加できないのでしょうか？
実行してみたのですが何も追加されていませんでした。
addChild()も試しましたがうまくいきませんでした。
無知ですみません。ご存じの方いましたらご教授いただきたいと思います。


尚、DTextPictureプラグイン等からもテキストを追加できますが
今は自作プラグインを勉強したいと思いますので
自分でスクリプトを追加したいと思います。

コード: 全て選択

 // _Sprite_Timer_createBitmap override
    var _Sprite_Timer_createBitmap = Sprite_Timer.prototype.createBitmap;
    Sprite_Timer.prototype.createBitmap = function() {
        _Sprite_Timer_createBitmap.call(this);
        //タイマーテキスト
        this.bitmap = new Bitmap(width, height);
        this.bitmap.textColor = fontColor;
        this.bitmap.fontSize = fontSize;
        if (fontFace) {
            Graphics.loadFont(fontFace, 'fonts/' + fontFace + '.ttf');
            this.bitmap.fontFace = fontFace;
        }
        //TIMEテキスト
        this.bitmap2 = new Bitmap(100, 50);
        this.bitmap2.textColor = fontColor;
        this.bitmap2.fontSize = fontSize;
        this.bitmap2.drawText('TIME', 0, -50, 100, 50, 'center');
        if (fontFace) {
            Graphics.loadFont(fontFace, 'fonts/' + fontFace + '.ttf');
            this.bitmap2.fontFace = fontFace;
        }
    };

[ツミオ]

こんばんは。
僕も半年前にプログラミングを始めたばかりなので詳しいわけではないですが、わかる範囲でお力になれたらなと思います。

まずSprite_XXX系はbitmapプロパティを一つしか持ちません（公式のヘルプのJSライブラリを見てみてください）。
つまりSprite_XXX系の中でbitmap2などとしてもダメです（やり方があるかもしれませんが、素直に別のSprite_XXX系のインスタンスを作るのがよいと思います）。

ではどうすればよいかと言うと、今回の場合ですとredraw()の中を以下のように改変します（最後の行が追加分）。
また、もとのBitmapの高さではおそらく望む文字が表示できないので、createBitmap()の中で高さも変更しています。
結果は以下のようになります。

コード: 全て選択

    Sprite_Timer.prototype.createBitmap = function() {
        this.bitmap = new Bitmap(96, 150);//←高さを変更しないと表示できない
        this.bitmap.fontSize = 32;
    };

    Sprite_Timer.prototype.redraw = function() {
        var text   = this.timerText();
        var width = this.bitmap.width;
        var height = this.bitmap.height;
        this.bitmap.clear();
        this.bitmap.drawText(text, 0, 0, width, height, 'center');

        this.bitmap.drawText('TIME', 0, 50, width, height, 'center');//ここで描画する文字を追加している
    };


これで文字を描画できるようになります。
わかりやすいように元のコードを完全に上書きしているので、実際に使うときは改変してください。

[にゃたま]

ツミオ様

はじめまして。ご連絡いただきありがとうございます。

まずSprite_XXX系はbitmapプロパティを一つしか持ちません（公式のヘルプのJSライブラリを見てみてください）。
つまりSprite_XXX系の中でbitmap2などとしてもダメです（やり方があるかもしれませんが、素直に別のSprite_XXX系のインスタンスを作るのがよいと思います）。

これは知りませんでした。勉強になりました。教えて頂きありがとうございます。

こちらの方法でうまくTIMEを表示することができました。
但しTIMEのフォントサイズがタイマーのフォントと同じになってしまうようですが
フォントサイズを分けるにはどうしたら良いでしょうか？
すみません。再度お手数おかけしますがよろしくお願いします。

[ツミオ]

こんにちは。

フォントサイズを変更している部分は以下のような箇所です。

コード: 全て選択

this.bitmap.fontSize = 32;

このフォントサイズは描画する直前に指定されていたものが適用されるようです。
つまりredraw()の中で例えば以下のようにすればよいです。

コード: 全て選択

        this.bitmap.fontSize = 32;//元のサイズ
        this.bitmap.drawText(text, 0, 0, width, height, 'center');
        this.bitmap.fontSize = 15;//変更後のサイズ
        this.bitmap.drawText('TIME', 0, 50, width, height, 'center');


[にゃたま]

ツミオ様

素早い対応ありがとうございます。

こんにちは。
フォントサイズを変更している部分は以下のような箇所です。

コード: 全て選択

this.bitmap.fontSize = 32;

このフォントサイズは描画する直前に指定されていたものが適用されるようです。
つまりredraw()の中で例えば以下のようにすればよいです。

コード: 全て選択

Sprite_Timer.prototype.redraw = function() {
    var text = this.timerText();
    var width = this.bitmap.width;
    var height = this.bitmap.height;
    this.bitmap.clear();
    //ここでフォントサイズを指定してない
    this.bitmap.drawText(text, 0, 0, width, height, 'center');
};

なるほど、ということはオリジナルのredrawのなかにclear()した後、フォントサイズ指定せず
drawText()してしまってるので

コード: 全て選択

var _Sprite_Timer_redraw = Sprite_Timer.prototype.redraw;
    Sprite_Timer.prototype.redraw = function() {
        _Sprite_Timer_redraw.call(this);//オリジナルを呼び出し

        this.bitmap.fontSize = 32;//元のサイズ
        this.bitmap.drawText(text, 0, 0, width, height, 'center');

        this.bitmap.fontSize = 15;//変更後のサイズ
        this.bitmap.drawText('TIME', 0, 50, width, height, 'center');
};

このようにオリジナル（元のコアスクリプト）を呼び出しても
フォントサイズが変更後のサイズで統一されてしまうのですね。
オリジナルを呼ばずに完全に上書きするしかないんですね…
オリジナルを呼んで追記する形だとスマートだと思うんですがこうするしかなさそうですね。

[ツミオ]

処理の最後にフォントサイズを元に戻す処理を付け加えてみてはいかがでしょうか？
具体的には以下のようになります。

コード: 全て選択

    var _Sprite_Timer_redraw = Sprite_Timer.prototype.redraw;
    Sprite_Timer.prototype.redraw = function() {
        _Sprite_Timer_redraw.call(this);//オリジナルを呼び出し
        var width  = this.bitmap.width;
        var height = this.bitmap.height;
        this.bitmap.fontSize = 15;
        this.bitmap.drawText('TIME', 0, 50, width, height, 'center');//ここで描画するの追加
        this.bitmap.fontSize = 32;//元に戻す
    };


もっとスマートな書き方があるかもしれませんので、参考程度でお願いします。

【追記】
最終的には以下のようなコードでいかがでしょうか？
こちらも参考程度でお願いします。

コード: 全て選択

    Sprite_Timer.prototype.createBitmap = function() {
        this.bitmap = new Bitmap(96, 150);//←高さを変更しないと表示できない
        this.bitmap.fontSize = this.standardFontSize();
    };

    Sprite_Timer.prototype.standardFontSize = function() {
        return 32;
    };

    var _Sprite_Timer_redraw = Sprite_Timer.prototype.redraw;
    Sprite_Timer.prototype.redraw = function() {
        _Sprite_Timer_redraw.call(this);//オリジナルを呼び出し
       
        this.drawOriginalText('TIME', 15);//文字,サイズの順で指定
    };

    Sprite_Timer.prototype.drawOriginalText = function(text, size) {
        var width  = this.bitmap.width;
        var height = this.bitmap.height;
        this.bitmap.fontSize = size;
        this.bitmap.drawText(text, 0, 50, width, height, 'center');//x座標y座標は任意の場所を指定
        this.bitmap.fontSize = this.standardFontSize();//フォントサイズを元に戻す処理
    }


[にゃたま]

ツミオ様

素早すぎる対応ありがとうございます。投稿して５分とか早っ(*´Д｀)

処理の最後にフォントサイズを元に戻す処理を付け加えてみてはいかがでしょうか？

ありがとうございます。この方法でうまくいきました。フォントの更新方法が勉強になりました。
スマートな方法は突き詰めれば色々あるかと思いますが現状はこれだけできれば十分です。
また機会がありましたらよろしくお願いします。今回はこれで解決済みとします。

追記
すみません。わざわざありがとうございます。追記分もこれから検証します。

[にゃたま]

ツミオ様

成る程、やってることは同じでdrawOriginalTextにredrawでやってたことを詰め込んだんですね。
TIME以外にテキストを多数入れる場合はこちらのほうがスマートになりますね。
参考にさせていただきます。ありがとうございました。