Tutorial:Object Follows Mouse (日本語)

Overview

この教本では、自作ゲームのウィンドウでマウスポインタの後にオブジェクトを追従させる方法を学習します。

第一部: マウスの検出
第二部: オブジェクトの追従
第三部: コード全体

第一部: マウスの検出

これを開始するために、自作の main.lua を用意する必要があります。さて、最初に行う必要があることは各々の x および y 座標に相当するマウス座標を二つの変数へ格納することです。これを行うには love.mouse.getPosition (日本語) を使用します。教本の意図は、ゲームの変数値を絶えず更新している場合に同じ画面へ座標を表示して確認できるようすることです。

mouse = {}

function love.load()

end

function love.update(dt)
    mouse.x, mouse.y = love.mouse.getPosition()  -- これはマウスの x および y　座標を取得してから値を各変数へ代入します。
end

function love.draw()
    love.graphics.setColor(255, 255, 255)
    love.graphics.print("Mouse Coordinates: " .. mouse.x .. ", " .. mouse.y)
end

注釈: ゲームが変数の内容をいつでも変更できるようにするために、 love.update 関数に変数を配置しています。 love.load の内側に変数を宣言してから表示を行うと、常にゲームが検出した最初のマウス座標を表示する関係で、変数の値は一切更新されなくなります。

さて、このようになります:

第二部: オブジェクトの追従

次に、オブジェクトを追従させます。これを行うには、最初にオブジェクトを作成します。教本の意図は、オブジェクトを赤色の円として作成することです。

...
circle = {}

function love.load()
    circle.x = 300   -- これは x 軸に対して 300 ピクセルの円を右側に表示します。
    circle.y = 300   -- これは x 軸に対して 300 ピクセルの円を下側に表示します。
end

function love.update(dt)
    ...
end

function love.draw()
    -- マウス座標のテキスト上に円を描画してください。
    love.graphics.setColor(255, 0, 0)                     -- 円の色を赤に設定します。
    love.graphics.circle("fill", circle.x, circle.y, 50)  -- 指定された座標に半径 50 で円を描画します。
    ...
end

さて、赤い円があるので、それをマウスに追従させる必要があります。これを行うには、オブジェクトの座標をマウスの現在座標と比較することあり、条件を満たしている場合は、オブジェクトはマウスの方向へ移動します。ここで自機の移動に関する基本が適用されています。円の動作速度を宣言する必要があり、この速度はデルタ時間により加速させる必要があります。

...
circle = {}

function love.load()
    ...
    -- 下記の円の座標を追加します。
    circle.speed = 300  -- 円の移動速度は 300 です。
end

function love.update(dt)
    ...
    -- 下記に love.mouse.getPosition() を追加します。

    -- マウスの左側に円が存在する場合:
    if circle.x < mouse.x then
	circle.x = circle.x + (circle.speed * 2.5 * dt)
    end
    
    -- マウスの右側に円が存在する場合:
    if circle.x > mouse.x then
	circle.x = circle.x - (circle.speed * 2.5 * dt)
    end

    -- マウスの上側に円が存在する場合:
    if circle.y < mouse.y then
	circle.y = circle.y + (circle.speed * 2.5 * dt)
    end

    -- マウスの下側に円が存在する場合:
    if circle.y > mouse.y then
	circle.y = circle.y - (circle.speed * 2.5 * dt)
    end
end

function love.draw()
    ...
end

注釈: 値である "2.5" は任意選択値です。この役割は設定した移動速度を調整し続ける必要がないようにするため、またはデルタ時間に関する複雑な操作をしなくても良い様に移動周期の加速させることです。必要であれば完全に変更、または除去することができます。

さて、このようになります:

おめでとうございます！　これでオブジェクトをマウスに追従させることに成功しました。

第三部: コード全体

mouse = {}
circle = {}

function love.load()
	circle.x = 300
	circle.y = 300

	circle.speed = 300
end

function love.update(dt)
	mouse.x, mouse.y = love.mouse.getPosition()

	if circle.x < mouse.x then
		circle.x = circle.x + (circle.speed * 2.5 * dt)
	end
	if circle.x > mouse.x then
		circle.x = circle.x - (circle.speed * 2.5 * dt)
	end
	if circle.y < mouse.y then
		circle.y = circle.y + (circle.speed * 2.5 * dt)
	end
	if circle.y > mouse.y then
		circle.y = circle.y - (circle.speed * 2.5 * dt)
	end
end

function love.draw()
	love.graphics.setColor(255, 0, 0)
	love.graphics.circle("fill", circle.x, circle.y, 50)

	love.graphics.setColor(255, 255, 255)
	love.graphics.print("Mouse Coordinates: " .. mouse.x .. ", " .. mouse.y)
end

そのほかの言語

Dansk – Deutsch – English – Español – Français – Indonesia – Italiano – Lietuviškai – Magyar – Nederlands – Polski – Português – Română – Slovenský – Suomi – Svenska – Türkçe – Česky – Ελληνικά – Български – Русский – Српски – Українська – עברית – ไทย – 日本語 – 正體中文 – 简体中文 – Tiếng Việt – 한국어
More info