円と四角形を簡単に書けるようにしておく【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

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

▷▷▷最終決戦

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

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

 

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

どのゲームで遊ぶ?

爆弾を設置して爆発で敵を倒す懐かしいレトロゲーム。敵をすべて倒すとステージクリアです。...
あほげー。世紀末な感じの世界で熱い男たちの戦いの火ぶたが切って落とされる!?
マリオ風横スクロールアクションゲーム。地下から制限時間内に脱出しろ!
ひったくり犯を追いかけるランゲー。道に落ちている障害物には気を付けて。

コメント欄

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

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

コメントを残す

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

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発