プレイヤーを表示しよう
今回作るのはレーシングゲームなので、プレイヤー(車)をユーザが操作します。
まずはプレイヤーを表示してみましょう。
このレッスンでは、プレイヤーとして車の画像ではなく、ただの四角形を表示することにします。
車の画像を読み込んで表示させる方法はコースの最後に説明します。
それでは、コード全体を次のように変更してください。
function setup() { createCanvas(400, 400); rectMode(CENTER); } function draw() { background(0); rect(200, 200, 30, 30); }
前回のレッスンのコードに、2つのコードを追加しました。
rectMode(CENTER);
これは、指定した座標を中心として四角形を描画するという意味のコードになりますが、よく分からなければいったん理解せずに進んでも大丈夫です。
rect(200, 200, 30, 30);
このコードで、ゲーム画面上に四角形を表示します。
rect
が四角形を描画するという指示になります。数字が、位置とサイズを表しています。
rect(X座標, Y座標, 幅, 高さ);
という指定方法になるので、
X座標が200 Y座標が200 幅が30 高さが30
の四角形を描画するという意味になります。
今、ゲーム画面のサイズは400×400なので、画面の真ん中に四角形が描画されます。
それではスタートボタンを押してみましょう!
無事に表示されましたか?
でもまだ画面の真ん中に表示されるだけで、何も操作できませんね。
次のレッスンでは、プレイヤーをユーザが操作できるようにします。