0Pricing
Lua Academy · レッスン

図形と画像を描画する

画面にグラフィックを表示します。

「図形と画像を描画する」はCoddyKit上の無料Lua Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはLua Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Lua Academyコースには全4レッスンが含まれています。

love.graphicsモジュール

LÖVEでの描画はすべてlove.graphicsを通じて行われます。love.drawの中でその関数を呼び出し、コールバックが戻るとエンジンがフレームを表示します。

基本図形、画像、テキスト、線を描画できるほか、色や変換も管理できます。毎フレーム、すべてを最初から描き直します。

長方形の描画

love.graphics.rectangleは、モード、続いて位置とサイズを受け取ります。モードは、塗りつぶした図形を描く'fill'か、輪郭だけを描く'line'のいずれかです。

座標はウィンドウの左上隅が基準で、xは右方向に増加し、yは下方向に増加します。

function love.draw()
  love.graphics.rectangle('fill', 50, 50, 120, 80)
  love.graphics.rectangle('line', 200, 50, 120, 80)
end

円と楕円

love.graphics.circle(mode, x, y, radius)は、x, yを中心とする円を描きます。長方形と同様に、'fill'または'line'を指定できます。

楕円には、水平半径と垂直半径を分けて指定するlove.graphics.ellipseを使います。滑らかさを調整するため、追加のsegments引数を渡すこともできます。

function love.draw()
  love.graphics.circle('fill', 150, 150, 40)
  love.graphics.ellipse('line', 300, 150, 60, 30)
end

色の設定

love.graphics.setColorは、それ以降に描画するすべてのものの色合いを設定します。現在のLÖVEでは、各成分の範囲は0から1で、白は1, 1, 1です。

色は状態として保持されます。一度設定すると、再度変更するまで後続のすべての描画に適用されます。色合いを付けたくない画像を描画する前に、白に戻します。

function love.draw()
  love.graphics.setColor(1, 0, 0)   -- red
  love.graphics.rectangle('fill', 20, 20, 60, 60)
  love.graphics.setColor(1, 1, 1)   -- back to white
end

線と点

love.graphics.lineは、一連のx, y座標をつなぎます。love.graphics.setLineWidthは、線や輪郭付き図形の太さを制御します。

一度に多数の点を渡して、つながったパスを描画できます。軌跡、パス、単純なベクターアートに便利です。

function love.draw()
  love.graphics.setLineWidth(3)
  love.graphics.line(10, 10, 80, 60, 150, 20)
end

画像の読み込み

love.graphics.newImageを使い、love.loadで画像を一度だけ読み込みます。再利用できるよう、変数に格納するImageオブジェクトが返されます。

love.drawの中で画像を読み込んではいけません。毎フレームファイルを再読み込みすることになり、パフォーマンスが大幅に低下します。

function love.load()
  sprite = love.graphics.newImage('player.png')
end

画像の描画

love.graphics.draw(image, x, y)は、指定した位置に画像を描画します。デフォルトでは、画像の左上隅がx, yに配置されます。

追加の引数で回転、拡大縮小、原点のオフセットを指定できるため、各スプライトの表示方法を完全に制御できます。

function love.draw()
  love.graphics.draw(sprite, player.x, player.y)
end

回転と拡大縮小

完全なシグネチャは draw(image, x, y, r, sx, sy, ox, oy) です。ここで r はラジアン単位の回転角、sx と sy は拡大縮小率です。

原点オフセット ox, oy で回転の中心を指定します。画像の中心を軸に回転させるには、原点に画像の幅と高さの半分を設定します。

local w, h = sprite:getWidth(), sprite:getHeight()
love.graphics.draw(sprite, x, y, angle, 1, 1, w/2, h/2)

テキストの描画

love.graphics.print(text, x, y) は、現在のフォントを使って文字列を描画します。love.graphics.setFont で使用するフォントを変更できます。

love.load で love.graphics.newFont('font.ttf', 24) を使うと、カスタムフォントを作成できます。色は図形と同じように、テキストにも色合いとして適用されることを覚えておいてください。

function love.draw()
  love.graphics.setColor(1, 1, 1)
  love.graphics.print('Score: ' .. score, 10, 10)
end

画面のクリアと背景

LÖVE は各フレームで自動的に画面をクリアしますが、love.load で love.graphics.setBackgroundColor を使ってクリア時の色を設定できます。

カスタム描画の中で手動制御する場合は、love.graphics.clear でバッファを指定した色で塗りつぶします。多くのゲームでは背景を一度設定し、クリアはエンジンに任せます。

function love.load()
  love.graphics.setBackgroundColor(0.1, 0.1, 0.2)
end

スプライトシート用のQuad

Quad は画像内の長方形の領域を選択するため、1つのスプライトシートに多数のフレームを収められます。love.graphics.newQuad で作成します。

Quad を love.graphics.draw(image, quad, x, y) に渡すと、その領域だけを描画できます。これがスプライトアニメーションの基礎です。

local sheet = love.graphics.newImage('sheet.png')
local frame = love.graphics.newQuad(0, 0, 32, 32, sheet:getDimensions())
-- love.graphics.draw(sheet, frame, x, y)

理解度チェック

LÖVE の描画についての知識を確認しましょう。

まとめ

love.draw 内で love.graphics を使って、長方形、円、線、画像、テキストを描画します。setColor は以降の描画に色合いを適用し、その状態が保持されます。

love.load で newImage を使って画像を一度だけ読み込み、その後 draw で描画します。スプライトシートには回転、拡大縮小、Quad も利用できます。

よくある質問

「図形と画像を描画する」レッスンは無料ですか？

はい。「図形と画像を描画する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Lua Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Lua Academyコースには全4レッスンが含まれています。

「図形と画像を描画する」で何を学びますか？

画面にグラフィックを表示します。 ブラウザで直接実行するハンズオンコードでLua Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Lua Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのLua Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「図形と画像を描画する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このLua Academyレッスンでコードを書いて実行できますか？

はい。すべてのLua Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. LOVEのゲームループ
  2. 図形と画像を描画する
  3. 入力を扱う
  4. 移動と衝突
← Lua Academyに戻る