マップのシーンに線や図形を直接描画したい 【解決済】

[fftfantt]

お世話になります。

ツクールMVにて、ピクチャや文字と同じように、canvasで使うような図形や線を描画したいのですが、簡単なサンプルコードをご教唆いただけないでしょうか？
よろしくお願いします。

[トリアコンタン]

こんばんは。

簡単なサンプルを用意してみました。

コード: 全て選択

(function () {
    'use strict';

    var _Spriteset_Base_createUpperLayer = Spriteset_Base.prototype.createUpperLayer;
    Spriteset_Base.prototype.createUpperLayer = function() {
        _Spriteset_Base_createUpperLayer.apply(this, arguments);
        if (this instanceof Spriteset_Map) {
            this.createDrawSprite();
        }
    };

    Spriteset_Map.prototype.createDrawSprite = function() {
        var sprite = new Sprite();
        sprite.bitmap = this.makeDrawBitmap();
        this.addChild(sprite);
    };

    Spriteset_Map.prototype.makeDrawBitmap = function() {
        var bitmap = new Bitmap(Graphics.boxWidth, Graphics.boxHeight);
        // 円を描きます。Bitmapクラスのメソッドはツクールのcore.jsで定義されています。
        bitmap.drawCircle(100, 100, 100, 'rgba(255,255,255,0.5)');
        // 線を描きます。こちらはHTML5のCanvasのメソッドを直接使用しています。
        var context = bitmap._context;
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(Graphics.boxWidth / 2, Graphics.boxHeight);
        context.lineTo(Graphics.boxWidth, Graphics.boxHeight / 2);
        context.lineTo(0, 0);
        context.stroke();
        return bitmap;
    };
})();

HTML5のCanvasのメソッドを直接使って図形を描画する方法は、こちらが参考になるかと思います。
http://www.html5.jp/canvas/index.html

[fftfantt]

トリアコンタンさん、いつも大変お世話になっております。
getElementByIdで、ツクールだとどこを取得すればいいか良く分からず、↓のような感じで試してもなかなか上手くいかなかったので、途方にくれていたのですが

コード: 全て選択

var cvs = document.getElementById('UpperCanvas');
var ctx = cvs.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(100,100);
ctx.lineTo(200,200); 
ctx.stroke(); 

作成していただいたような形でBitmapの部分を利用すればいいのですね。

コード: 全て選択

Bitmap.prototype.initialize = function(width, height) {
    this._canvas = document.createElement('canvas');
    this._context = this._canvas.getContext('2d');
    this._canvas.width = Math.max(width || 0, 1);
    this._canvas.height = Math.max(height || 0, 1);
    this._baseTexture = new PIXI.BaseTexture(this._canvas);
    this._baseTexture.scaleMode = PIXI.scaleModes.NEAREST;
    this._image = null;
    this._url = '';
    this._paintOpacity = 255;
    this._smooth = false;
    this._loadListeners = [];
    this._isLoading = false;
    this._hasError = false;
    

ありがとうございました。
大変勉強になりました！