円と四角形を簡単に書けるようにしておく【enchant.js】

ゲーム作ってるとけっこう円や四角形を使いたい、またはとりあえず円か四角形か表示させて開発を進めたいと思ったりすることないですか?(‘ω’)ノ

わたしは画像書くのが面倒なんで手抜きするために円や四角形をサクッと書けるクラスを作りました(*´ω`)面倒くさがりはプログラマーの資質だと思います(ウソ)

というわけで私はこんな感じにクラスを作って用意してあります(‘ω’)ノ

//円を描く
var DrawCircle = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h, color){//w, hは幅と高さ
        enchant.Sprite.call(this, w, h);
        var surface = new Surface(w, h);	// サーフェス生成
        surface.context.beginPath();
        surface.context.arc(w*0.5, h*0.5, w*0.5, 0, Math.PI*2, false);//原点X、原点Y、半径、始点ラジアン、終点ラジアン
        surface.context.fillStyle = color;
        surface.context.fill();
        this.image = surface;	// サーフェスを画像としてセット
    },
});
//四角を書く
var DrawRectangle= enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h, color){//w, hは幅と高さ
        enchant.Sprite.call(this, w, h);
        var surface = new Surface(w, h);	// サーフェス生成
        surface.context.beginPath();
        surface.context.fillStyle = color;
        surface.context.fillRect(0, 0, w, h);//X、Y、W、H
        this.image = surface;	// サーフェスを画像としてセット
    },
});

説明

円も四角形もどちらもすぐ表示出来るようにSpriteを継承して作ります。引数で幅と高さ、そして形を塗りつぶす色を指定します。

まぁあとはサーフェスとかコンテキストとか書いてる通りにすれば出来ます(^^;)←説明する気なし

 

円と四角形が掛けるだけのクラスですがけっこう使い道があります。

たとえば私のこのゲームでは

▷▷▷Space Hopper

自機がホップするときに出る炎?みたいなものを作るのに使ってますし、こっちでは

▷▷▷最終決戦

見てわかる通り爆発に使ってます。

まぁ要は使いようってことですわ(*´ω`)

 

あと、どうやら複雑な図形もけっこう書けるらしいので興味のある方は調べてみてください(‘ω’)ノ

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
宇宙船を操作して遭難しているエイリアン達を助けに行きます。全部で15ステージ。
つまらないカジュアルゲーム。マジでつまらない。ほんとに。
同色で複数隣り合っているタイルをタッチするとそのタイルのところに他のタイルが集まります...

記事の感想・コメント

  • はじめまして('ω')ノ質問ありがとうございます!
    しかし残念ながら質問の解決策はわかりません(^^;)
    たぶん以前のバージョンではDOMベースだったのでcssと連携できたようですが、途中からcanvasベースに変わったのでその辺の違いでcssでの指定がなくなっているんじゃないかと思います(あんまりわかってない。。)
    お役に立てなくてすいません(^^;)

  • はじめまして!いつも参考にさせていただいています!
    本記事とは関係ない質問になってしまい申し訳ないのですがご教授ください。
    cssと連携したいのですが、LabelやSpriteにclassやidを追加する方法はわかりますでしょうか?
    昔は.idや.classNameで指定が可能だったみたいなのですが、ver0.6?以降仕様が変わったみたいで今はできないようです。
    リファレンスも見ましたが自己解決できず・・・よろしくお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記