【プラグイン講座】図形を描いてみる

本日はシーンに図形を描いてみましょう。
例のごとく前回作成したものをそのまま流用するので、まだの方は前回分から読んでみてくださいね。

Spriteのわけかた

まずは図形を描く用のスプライトを作りましょう。
「前回作ったSprite使っちゃダメなの?」という疑問もあると思いますが、僕は「機能ごとにSpriteをわける」のがわかりやすくてよいと思います。
例えば僕のステータス画面拡張シーンプラグインなら、「文字を表示するスプライト」「ゲージを表示するスプライト」「グラフを描くスプライト」などでわけています。
ただわければわけるほど重くなるので(addChildの回数が増えるため)、そのへんは実際に遊んでみて、どれくらい重くなるのかを判断しつつかな~と思います。
とはいえそれほど複雑怪奇なものを作らない限り、まずは「コードのわかりやすさ」を重視するほうがよいと思いますよ。
重さ関連は慣れてきてから考えていきましょう。

新しいSpriteを作る

createSpriteメソッドの下に(実際はどこでもいいのですが、わかりやすさ重視のため)、createFigureSpriteメソッドを定義しましょう。

Scene_Sample.prototype.createSprite = function() {
};

こんな感じですね。

このメソッドの中を以下のようにしてください。

//スプライトとビットマップの作成
this.sprite_figure = new Sprite();
this.sprite_figure.bitmap = new Bitmap(Graphics.width, Graphics.height);
//addChild
this.addChild(this.sprite_figure);

一行目はいいですね。
前回と同じようにthis.sprite_figureに新しいSpriteを作っています。
「あれ?var bitmapは?」と思った方は鋭いですね。
今回は図形を描くので、Bitmapに画像のファイルをロードさせる必要がありません
そこでスプライトのBitmapに直接Bitmapを新しく作っちゃいます。
this.sprite_figure.bitmap = new Bitmap(Graphics.width, Graphics.height);
この部分ですね。

Graphics.widthとGraphics.heightってなんじゃという話ですが、要は画面の大きさのことです。
この画面の範囲内でBitmapを操作しますよーということです。
ただこれ、スプライトの座標設定を
this.sprite_figure.x = 300;
などとしたあとに、bitmapの方でもx座標を動かすと、その二つが合わさった分だけ動いちゃいます。

直感的に理解しにくいので、Spriteの中で図形を描くだけなら、XY座標の設定はスプライトの方ではせず、Bitmapを画面サイズで作り、座標の設定もBitmapの側でやったほうがいいと思います(重さがどうのという話もあると思いますので、そのへんは詳しい人の解説を待ちましょう。たぶんBitmapのサイズを大きくすればするほど重くなると思いますが、5つや6つくらい画面サイズのBitmapを作ってもゲームに支障は出ません。たぶん)。

というわけで最後の行。
おなじみのaddChild君ですね。
これで画面に図形を表示ずる準備が整いました。

実際に図形を描いてみる

createSpriteメソッド内に以下のコードを追加してください(addChildの下)。

//ここから図形を描く
this.sprite_figure.bitmap.fillRect ( 0, 0 ,100 , 100 , ‘#333’);

このfillRectはBitmapクラスに付属するメソッドで、要は矩形(長方形とか)を描くものです。
カッコの中は(X座標,Y座標,幅,高さ,色)となっています。
ついでに言っておくと、このカッコの中の数字やら文字やらのことを引数と言います
以降は引数という用語もこの講座で使っていきます。

さて
this.sprite_figure.bitmap.fillRect ( 0, 0 ,100 , 100 , ‘#333’);

「X座標0、Y座標0、幅100、高さ100,色#333の矩形を描け」という命令を出していることになります。

ついでに円も描いてみましょう。
this.sprite_figure.bitmap.drawCircle( 200, 200, 100, ‘#CCC’);
これは「X座標200、Y座標200、半径100、色#CCCの円を描け」という命令を出していることになります。

注*引数に何を書けばいいのかというのはヘルプに載っています。実際にプラグインを作るときはヘルプを参照しながら作りましょう。

これでcreateFigureSpriteメソッドの作成は完了です。
createメソッドを以下のように変え、createFigureSpriteメソッドを実行するようにしましょう。

Scene_Sample.prototype.create = function() {
Scene_Base.prototype.create.call(this);
//createSprite実行
this.createSprite();
//createFigureSprite実行
this.createFigureSprite();
};

ではゲームを起動し、例のごとくプラグインコマンドを実行させてScene_Sampleシーンを表示させてください。
濃い灰色の四角形と、薄い灰色の円が表示されていたら成功です。

もっと複雑な図形を描きたい

三角形とか、五芒星なんかを描きたくなる時があると思います。
ですが残念ながら、ツクールには三角形や五芒星を描く機能はついていません
ではどうすれば複雑な図形を描けるのか。
答えはHTML5のcanvasを利用するのです。
と言うか、先ほど使ったfillRectというメソッドもHTML5のcanvasを利用しています
fillRectメソッドの中身を見てみましょう。

Bitmap.prototype.fillRect = function(x, y, width, height, color) {
var context = this._context;
context.save();
context.fillStyle = color;
context.fillRect(x, y, width, height);
context.restore();
this._setDirty();
};

細かい意味はさておき、このcontextと書かれている部分はHTML5のcanvasと同じ機能が利用できることを意味します
つまりfillRectのようなメソッドを自分で用意すれば、いろんな図形が描けちゃうんですね。
さっそくやってみましょう。

注*HTML5のCanvasを利用した図形の描き方はいろんなサイトが解説してくれています。
http://www.html5.jp/canvas/index.html
僕はここをよく参照していますが、数学の知識がある方は、canvasのイロハを学べば五芒星やその他の多角形なんかも簡単に描けると思います。

//三角形を描くメソッド
Scene_Sample.prototype.drawTriangle = function(x, y ,color) {
this.sprite_figure.bitmap.context.save();
this.sprite_figure.bitmap.context.fillStyle = color;
this.sprite_figure.bitmap.context.beginPath();
this.sprite_figure.bitmap.context.moveTo(x + 50, y + 10);
this.sprite_figure.bitmap.context.lineTo(x + 90, y + 90);
this.sprite_figure.bitmap.context.lineTo(x + 10, y + 90);
this.sprite_figure.bitmap.context.closePath();
/* 三角形を塗りつぶす */
this.sprite_figure.bitmap.context.fill();
this.sprite_figure.bitmap.context.restore();
this.sprite_figure.bitmap._setDirty();
};

これをcreateFigureSpriteメソッドの下に追加します(例のごとく本当は場所はどこでもいいです)。

注*_setDirtyメソッドが何をしているのか、実は僕も理解していません。あってもなくても特に支障がないような気がしますが、ここでは一応つけておきましょう。たぶんupdateするとき、無闇にupdateしないようフラグをつけているのかなーと思っています。

追加できたら、今度はcreateFigureSpriteメソッドの中
this.drawTriangle(100,100,’#888′);
の一行を付け加えましょう。

これは先ほど追加したdrawTriangleメソッドを使いますよーという宣言です。
this.sprite_figure.bitmap.drawTriangleじゃないの? と思うかもしれませんが、メソッドの中にthis.sprite_figure.bitmap.context.と長々と書いているので、ここでは不要なのですね。

注*正確なことが知りたい方は、やはりJavaScriptの入門書を読むことをオススメします。

では実行してみてください。
灰色の円の中に三角形が表示されましたか?

されたなら成功です。
HTML5のcanvasについての理解が深まれば、グラデーションをつけたオシャレな図形なんかもサクサク作れちゃいます
ぜひHTML5のcanvasについても勉強してみてください。

では、お疲れ様でした。
次回はシーンにウィンドウを表示してみましょう。

フォローする