Cocos Creator は、豊富なコンポーネントとツールを備えた人気のあるゲーム開発エンジンです。その中で、グラフィックス コンポーネントを使用すると、ゲーム内に 2D グラフィックスと幾何学的形状を描画し、スクリプトを記述してその外観と動作を制御できます。
目次
1. コンポーネントのプロパティ
| 属性 | 機能説明 |
|---|---|
| 線幅 | 現在の線幅を設定または返す |
| lineJoin | 2 つの線が交差するときに作成されるコーナーのタイプを設定または取得します |
| ラインキャップ | 線の終点のスタイルを設定または返します |
| ストロークカラー | ストロークの色を設定または返します |
| 塗りつぶしの色 | 塗りつぶしの色を設定または返します |
| miterLimit | マイターの最大長を設定または返す |
2. 成分法
| 方法 | 機能説明 |
|---|---|
| moveTo (x, y) | 線を作成せずに、キャンバス内の指定されたポイントにパスを移動します |
| lineTo(x,y) | 新しいポイントを追加し、そのポイントから最後に指定されたポイントまでキャンバスに線を作成します |
| bezierCurveTo (c1x、c1y、c2x、c2y、x、y) | 3 次ベジエ曲線を作成する |
| quadraticCurveTo (cx、cy、x、y) | 二次ベジエ曲線を作成する |
| 円弧 (cx、cy、r、a0、a1、反時計回り) | 円弧/曲線の作成 (円または部分円の作成用) |
| 楕円 (cx、cy、rx、ry) | 楕円を作成する |
| circle(cx, cy, r) | 円を作成 |
| rect(x, y, w, h) | 長方形を作成 |
| 近い （） | 現在のポイントから開始ポイントに戻るパスを作成する |
| 脳卒中（） | 定義されたパスを描画します |
| 塗りつぶし（） | 現在の図面を塗りつぶす (パス) |
| クリア （） | すべてのパスをクリア |
3.スクリプト例
Graphics コンポーネントの基本的な使用法は非常に単純です。Cocos Creator エディターでは、新しいノードを作成し、それに Graphics コンポーネントを追加できます。次に、コンポーネントの API を使用して、図形、線、および塗りつぶしの色を描画できます。たとえば、次のコードは画面に赤い円を描画します。
var graphics = this.getComponent(cc.Graphics);
graphics.circle(0, 0, 100);
graphics.fillColor = cc.Color.RED;
graphics.fill();
この例では、まず現在のノードで Graphics コンポーネントを取得します。次に、circle() メソッドを使用して円を作成しました。このメソッドは、中心の座標と半径をパラメーターとして受け取ります。次に、fillColor プロパティを赤に設定し、fill() メソッドを呼び出して円を塗りつぶします。
Graphics コンポーネントは、基本的な形状の描画に加えて、パスと曲線の描画もサポートしています。たとえば、次のコードは画面に曲線を描画します。
var graphics = this.getComponent(cc.Graphics);
graphics.moveTo(0, 0);
graphics.quadraticCurveTo(100, 100, 200, 0);
graphics.strokeColor = cc.Color.BLUE;
graphics.stroke();
この例では、moveTo() メソッドを使用して描画ペンを始点に移動し、次に quadraticCurveTo() メソッドを使用して 2 次曲線を描画します。最後に、strokeColor プロパティを青に設定し、stroke() メソッドを呼び出して曲線の輪郭を描画します。
Graphics コンポーネントは、線幅の設定、テキストの描画、グラデーションの塗りつぶしなど、他の多くの機能もサポートしています。完全な API リファレンスとサンプル コードは、Cocos Creator のドキュメントに記載されています。グラフィックス コンポーネントをマスターすることで、ゲーム体験を向上させる美しい 2D グラフィックスと視覚効果を作成できます。
つまり、Graphics は Cocos Creator の非常に強力なコンポーネントの 1 つであり、さまざまな 2D グラフィックの作成とレンダリングに使用できます。豊富なプロパティとメソッドを備えているため、ユーザーはさまざまな効果を簡単に実現できます。