Difference between revisions of "TLfres (日本語)"
(Created page with "== TLfres について == TLfres の目的は[http://dl.dropbox.com/u/3713769/web/Love/TLTools/TLfres%20pic.png 任意のゲームを任意の画面解像度で実行]でき...") |
m (→用例) |
||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== TLfres について == | == TLfres について == | ||
− | TLfres の目的は[http://dl.dropbox.com/u/3713769/web/Love/TLTools/TLfres%20pic.png | + | TLfres の目的は[http://dl.dropbox.com/u/3713769/web/Love/TLTools/TLfres%20pic.png 指定の画面解像度でゲームを実行]できるように作成することを非常に容易にすることです。これを使用してもグラフィックスのコード書き直しは要求されません! |
このライブラリの使用条件は [http://www.opensource.org/licenses/zlib-license.php ZLIB ライセンス]です。 | このライブラリの使用条件は [http://www.opensource.org/licenses/zlib-license.php ZLIB ライセンス]です。 | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== 準備 == | == 準備 == | ||
− | モジュールにある全ての関数は TLfres 名前空間に存在しており、従ってグローバル変数への干渉を心配する必要はありません。ゲームでは LÖVE 標準解像度である | + | モジュールにある全ての関数は TLfres 名前空間に存在しており、従ってグローバル変数への干渉を心配する必要はありません。ゲームでは LÖVE 標準解像度である 800×600 を使用して構築されている仮定します: |
− | # | + | # ゲームのフォルダへ tlfres.lua を保存します。 |
− | # main.lua | + | # main.lua の先頭へ <code>local TLfres = require "tlfres"</code> の行を追加します。 |
− | # love.draw() | + | # love.draw() の始行へ <code>TLfres.beginRendering(800, 600)</code> の行を追加します。 |
− | # love.draw() | + | # love.draw() の終行へ <code>TLfres.endRendering()</code> の行を追加します。 |
+ | # 現在の尺度係数値が必要ならば、 <code>TLfres.getScale(800, 600)</code> を呼び出してください。 | ||
+ | # love.mouse.getPosition を呼び出すのではなく <code>TLfres.getMousePosition(800, 600)</code> を呼び出してください。 | ||
+ | # love.graphics.setPointSize(x) を呼び出すのではなく <code>love.graphics.setPointSize(x * TLfres.getScale())</code> を呼び出してください (Love は点の大きさを自動的に変更しません) | ||
== よくある質問と回答 == | == よくある質問と回答 == | ||
− | ; Q) | + | ; Q) この関数を [[love.graphics.scale (日本語)|love.graphics.scale]] の代わりに使う理由は? |
− | : A) | + | : A) 指定解像度にて画面を等しく伸張するには技巧的な算術を要求されますが、 TLfres ではそれを処理することができるからです。さらに、ほとんどの人々は伸張されたグラフィックスを嫌います。 ― そのため、 TLfres の letterboxing (レターボックス化) オプションを使用するべきです。画面を伸張する代わりに、正確な比率で大きさを変更し、必要であれば上部と下部へ暗幕帯を描画します。 |
; Q) どの解像度 / アスペクト比率に対応していますか? | ; Q) どの解像度 / アスペクト比率に対応していますか? | ||
− | : A) | + | : A) 全部対応しています。 |
− | ; Q) | + | ; Q) 非標準の解像度を使用してゲームを作成しました。 TLfres に対応するために全部変更しなければらないのでしょうか? |
− | : A) いいえ! | + | : A) いいえ! ゲーム構築時の解像度で TLfres.beginRendering() を呼び出してください (詳細は後述)。 |
== 関数 == | == 関数 == | ||
− | ==== TLfres. | + | ==== TLfres.beginRendering ==== |
− | <source lang="lua">TLfres. | + | <source lang="lua">TLfres.beginRendering(width, height, centered)</source> |
− | + | なにか描画する前に [[love.draw (日本語)|love.draw]]() の一行目で、この関数を呼び出してください。これは現在の画面解像度で必要とされる尺度と座標変換 (並進移動) です。絶対画面座標で描画する場合は、この関数の呼び出し前 (または endRendering() の呼び出し後) に描画処理をしてください。 | |
− | {{param| | + | {{param|number|width|対象となる Canvas の幅。}} |
− | {{param|number| | + | {{param|number|height|対象となる Canvas の高さ。}} |
− | {{param| | + | {{param|boolean|centered (false)|true ならば (0, 0) の座標は Canvas の中央となり、そうでなければ左上角となります。}} |
− | {{param| | + | |
+ | ==== TLfres.endRendering ==== | ||
+ | <source lang="lua">TLfres.endRendering(letterboxColor)</source> | ||
+ | すべて描画した後に [[love.draw (日本語)|love.draw]]() の最終行で、この関数を呼び出してください。画面表示範囲外にあるグラフィックスのトリミングをするためにレターボックスを描画します。デフォルトのレターボックスは黒色です。 | ||
+ | {{param|table|letterboxColor ({0,0,0, 255})|レターボックスの配色を RGBA で指定します ([[love.graphics.setColor (日本語)#Function 2|love.graphics.setColor]] と同じです)。デフォルトは黒色です。}} | ||
+ | |||
+ | ==== TLfres.getScale ==== | ||
+ | <source lang="lua">TLfres.getScale(width, height)</source> | ||
+ | {{param|number|width|コードで指定された Canvas の幅。}} | ||
+ | {{param|number|height|コードで指定された Canvas の高さ。}} | ||
+ | |||
+ | ==== TLfres.getMousePosition ==== | ||
+ | <source lang="lua">TLfres.getMousePosition(width, height)</source> | ||
+ | これは通常、 [[love.mouse.getPosition (日本語)|love.mouse.getPosition]] を呼び出すときに使用してください。返される位置は指定の寸前になります。 | ||
+ | {{param|number|width|コードで指定された Canvas の幅。}} | ||
+ | {{param|number|height|コードで指定された Canvas の高さ。}} | ||
+ | |||
+ | == tlfres.lua == | ||
+ | <source lang="lua"> | ||
+ | local lwGetMode = _G.love.window.getMode | ||
+ | local lgPush = _G.love.graphics.push | ||
+ | local lgPop = _G.love.graphics.pop | ||
+ | local lgTranslate = _G.love.graphics.translate | ||
+ | local lgScale = _G.love.graphics.scale | ||
+ | local lgRectangle = _G.love.graphics.rectangle | ||
+ | local lgSetColor = _G.love.graphics.setColor | ||
+ | local lmGetPosition = _G.love.mouse.getPosition | ||
+ | local min = math.min | ||
+ | |||
+ | local TLfres = {} | ||
+ | |||
+ | local lastMouseX, lastMouseY = 0, 0 | ||
+ | local currentlyRendering | ||
+ | |||
+ | -- 内部ヘルパー関数 | ||
+ | local function _getRawMousePosition(width, height) | ||
+ | local x, y = lmGetPosition() | ||
+ | local w, h = lwGetMode() | ||
+ | local scale = min(w/width, h/height) | ||
+ | return (x - (w - width * scale) * 0.5)/scale, (y - (h - height * scale) * 0.5)/scale | ||
+ | end | ||
+ | |||
+ | -- これは通常、 love.mouse.getPosition を呼び出すときに使用してください。 | ||
+ | -- 返される位置は指定の寸前になります。 | ||
+ | function TLfres.getMousePosition(width, height) | ||
+ | local x, y = _getRawMousePosition(width, height) | ||
+ | if x >= 0 and x <= width and y >= 0 and y <= height then | ||
+ | lastMouseX, lastMouseY = _getRawMousePosition(width, height) | ||
+ | end | ||
+ | return lastMouseX, lastMouseY | ||
+ | end | ||
− | + | -- | |
− | + | -- 希望する寸法と現在の寸法から現在の尺度を計算します。 | |
− | + | -- レンダリングブロックから呼び出す場合は、引数 width と height は必要に応じて指定してください。 | |
+ | function TLfres.getScale(width, height) | ||
+ | if currentlyRendering then | ||
+ | width = width or currentlyRendering[1] | ||
+ | height = height or currentlyRendering[2] | ||
+ | end | ||
+ | local w, h = lwGetMode() | ||
+ | return min(w/width, h/height) | ||
+ | end | ||
− | + | -- 拡大と中央揃えにより現在のウィンドウに width×height を収めます。 | |
− | + | -- 0,0 は Canvas の左上です。また centered が true ならば中央になります。 | |
− | + | -- この関数は love.graphics.push の前とレンダリング後 love.graphics.pop の次行で使用してください。 | |
− | + | function TLfres.beginRendering(width, height, centered) | |
− | + | if currentlyRendering then | |
− | { | + | error("Must call tlfres.endRendering before calling beginRendering.") |
+ | return | ||
+ | end | ||
+ | currentlyRendering = {width, height} | ||
+ | lgPush() | ||
− | {{#set:LOVE Version=0. | + | local w, h = lwGetMode() |
− | {{#set:Description= | + | local scale = min(w/width, h/height) |
+ | lgTranslate((w - width * scale) * 0.5, (h - height * scale) * 0.5) | ||
+ | lgScale(scale) | ||
+ | if centered then | ||
+ | lgTranslate(0.5 * width, 0.5 * height) | ||
+ | end | ||
+ | return scale | ||
+ | end | ||
+ | |||
+ | local _black = {0, 0, 0, 255} | ||
+ | |||
+ | -- 座標変換から復帰します。letterboxColor が true ならば黒色でレターボックスの暗幕を描画します。 | ||
+ | -- letterboxColor には {r, g, b, a} テーブルを指定できます。 | ||
+ | function TLfres.endRendering(letterboxColor) | ||
+ | if not currentlyRendering then | ||
+ | error("Must call tlfres.beginRendering before calling endRendering.") | ||
+ | return | ||
+ | end | ||
+ | local width, height = currentlyRendering[1], currentlyRendering[2] | ||
+ | currentlyRendering = nil | ||
+ | lgPop() | ||
+ | |||
+ | local w, h = lwGetMode() | ||
+ | local scale = min(w/width, h/height) | ||
+ | width, height = width * scale, height * scale | ||
+ | |||
+ | lgSetColor(letterboxColor or _black) | ||
+ | lgRectangle("fill", 0, 0, w, 0.5 * (h - height)) -- 上 | ||
+ | lgRectangle("fill", 0, h, w, -0.5 * (h - height)) -- 下 | ||
+ | lgRectangle("fill", 0, 0, 0.5 * (w - width), h) -- 左 | ||
+ | lgRectangle("fill", w, 0, -0.5 * (w - width), h) -- 右 | ||
+ | end | ||
+ | |||
+ | return TLfres | ||
+ | </source> | ||
+ | |||
+ | == 用例 == | ||
+ | <source lang="lua"> | ||
+ | local TLfres = require "tlfres" | ||
+ | |||
+ | local CANVAS_WIDTH = 800 | ||
+ | local CANVAS_HEIGHT = 600 | ||
+ | local POINT_SIZE = 1 | ||
+ | |||
+ | function love.mouse.getPosition() -- 標準関数をヘルパー関数でオーバーライドします。 | ||
+ | return TLfres.getMousePosition(CANVAS_WIDTH, CANVAS_HEIGHT) | ||
+ | end | ||
+ | |||
+ | function love.draw() | ||
+ | tlfres.beginRendering(CANVAS_WIDTH, CANVAS_HEIGHT) | ||
+ | |||
+ | love.graphics.setPointSize(tlfres.getScale()*POINT_SIZE) -- 点の大きさは自動的に変更されませんので、手動で乗算をしてください。 | ||
+ | love.graphics.points(400, 300) -- 画面寸法の変更に関係なく描画は Canvas の中心で行います。 | ||
+ | |||
+ | tlfres.endRendering() -- 黒色でレターボックスを描画します。 | ||
+ | end | ||
+ | </source> | ||
+ | |||
+ | {{#set:LOVE Version=0.10.2}} | ||
+ | {{#set:Description=簡単に使えて画像伸張を行わずにゲームを指定の画面解像度で実行します。}} | ||
{{#set:License=ZLIB license}} | {{#set:License=ZLIB license}} | ||
{{#set:Author=User:Taehl}} | {{#set:Author=User:Taehl}} | ||
[[Category:Libraries (日本語)]] | [[Category:Libraries (日本語)]] | ||
− | |||
== そのほかの言語 == | == そのほかの言語 == | ||
− | {{i18n|TLfres}} | + | {{i18n (日本語)|TLfres}} |
Latest revision as of 09:42, 18 December 2019
Contents
TLfres について
TLfres の目的は指定の画面解像度でゲームを実行できるように作成することを非常に容易にすることです。これを使用してもグラフィックスのコード書き直しは要求されません!
このライブラリの使用条件は ZLIB ライセンスです。
準備
モジュールにある全ての関数は TLfres 名前空間に存在しており、従ってグローバル変数への干渉を心配する必要はありません。ゲームでは LÖVE 標準解像度である 800×600 を使用して構築されている仮定します:
- ゲームのフォルダへ tlfres.lua を保存します。
- main.lua の先頭へ
local TLfres = require "tlfres"
の行を追加します。 - love.draw() の始行へ
TLfres.beginRendering(800, 600)
の行を追加します。 - love.draw() の終行へ
TLfres.endRendering()
の行を追加します。 - 現在の尺度係数値が必要ならば、
TLfres.getScale(800, 600)
を呼び出してください。 - love.mouse.getPosition を呼び出すのではなく
TLfres.getMousePosition(800, 600)
を呼び出してください。 - love.graphics.setPointSize(x) を呼び出すのではなく
love.graphics.setPointSize(x * TLfres.getScale())
を呼び出してください (Love は点の大きさを自動的に変更しません)
よくある質問と回答
- Q) この関数を love.graphics.scale の代わりに使う理由は?
- A) 指定解像度にて画面を等しく伸張するには技巧的な算術を要求されますが、 TLfres ではそれを処理することができるからです。さらに、ほとんどの人々は伸張されたグラフィックスを嫌います。 ― そのため、 TLfres の letterboxing (レターボックス化) オプションを使用するべきです。画面を伸張する代わりに、正確な比率で大きさを変更し、必要であれば上部と下部へ暗幕帯を描画します。
- Q) どの解像度 / アスペクト比率に対応していますか?
- A) 全部対応しています。
- Q) 非標準の解像度を使用してゲームを作成しました。 TLfres に対応するために全部変更しなければらないのでしょうか?
- A) いいえ! ゲーム構築時の解像度で TLfres.beginRendering() を呼び出してください (詳細は後述)。
関数
TLfres.beginRendering
TLfres.beginRendering(width, height, centered)
なにか描画する前に love.draw() の一行目で、この関数を呼び出してください。これは現在の画面解像度で必要とされる尺度と座標変換 (並進移動) です。絶対画面座標で描画する場合は、この関数の呼び出し前 (または endRendering() の呼び出し後) に描画処理をしてください。
number width
- 対象となる Canvas の幅。
number height
- 対象となる Canvas の高さ。
boolean centered (false)
- true ならば (0, 0) の座標は Canvas の中央となり、そうでなければ左上角となります。
TLfres.endRendering
TLfres.endRendering(letterboxColor)
すべて描画した後に love.draw() の最終行で、この関数を呼び出してください。画面表示範囲外にあるグラフィックスのトリミングをするためにレターボックスを描画します。デフォルトのレターボックスは黒色です。
table letterboxColor ({0,0,0, 255})
- レターボックスの配色を RGBA で指定します (love.graphics.setColor と同じです)。デフォルトは黒色です。
TLfres.getScale
TLfres.getScale(width, height)
TLfres.getMousePosition
TLfres.getMousePosition(width, height)
これは通常、 love.mouse.getPosition を呼び出すときに使用してください。返される位置は指定の寸前になります。
tlfres.lua
local lwGetMode = _G.love.window.getMode
local lgPush = _G.love.graphics.push
local lgPop = _G.love.graphics.pop
local lgTranslate = _G.love.graphics.translate
local lgScale = _G.love.graphics.scale
local lgRectangle = _G.love.graphics.rectangle
local lgSetColor = _G.love.graphics.setColor
local lmGetPosition = _G.love.mouse.getPosition
local min = math.min
local TLfres = {}
local lastMouseX, lastMouseY = 0, 0
local currentlyRendering
-- 内部ヘルパー関数
local function _getRawMousePosition(width, height)
local x, y = lmGetPosition()
local w, h = lwGetMode()
local scale = min(w/width, h/height)
return (x - (w - width * scale) * 0.5)/scale, (y - (h - height * scale) * 0.5)/scale
end
-- これは通常、 love.mouse.getPosition を呼び出すときに使用してください。
-- 返される位置は指定の寸前になります。
function TLfres.getMousePosition(width, height)
local x, y = _getRawMousePosition(width, height)
if x >= 0 and x <= width and y >= 0 and y <= height then
lastMouseX, lastMouseY = _getRawMousePosition(width, height)
end
return lastMouseX, lastMouseY
end
--
-- 希望する寸法と現在の寸法から現在の尺度を計算します。
-- レンダリングブロックから呼び出す場合は、引数 width と height は必要に応じて指定してください。
function TLfres.getScale(width, height)
if currentlyRendering then
width = width or currentlyRendering[1]
height = height or currentlyRendering[2]
end
local w, h = lwGetMode()
return min(w/width, h/height)
end
-- 拡大と中央揃えにより現在のウィンドウに width×height を収めます。
-- 0,0 は Canvas の左上です。また centered が true ならば中央になります。
-- この関数は love.graphics.push の前とレンダリング後 love.graphics.pop の次行で使用してください。
function TLfres.beginRendering(width, height, centered)
if currentlyRendering then
error("Must call tlfres.endRendering before calling beginRendering.")
return
end
currentlyRendering = {width, height}
lgPush()
local w, h = lwGetMode()
local scale = min(w/width, h/height)
lgTranslate((w - width * scale) * 0.5, (h - height * scale) * 0.5)
lgScale(scale)
if centered then
lgTranslate(0.5 * width, 0.5 * height)
end
return scale
end
local _black = {0, 0, 0, 255}
-- 座標変換から復帰します。letterboxColor が true ならば黒色でレターボックスの暗幕を描画します。
-- letterboxColor には {r, g, b, a} テーブルを指定できます。
function TLfres.endRendering(letterboxColor)
if not currentlyRendering then
error("Must call tlfres.beginRendering before calling endRendering.")
return
end
local width, height = currentlyRendering[1], currentlyRendering[2]
currentlyRendering = nil
lgPop()
local w, h = lwGetMode()
local scale = min(w/width, h/height)
width, height = width * scale, height * scale
lgSetColor(letterboxColor or _black)
lgRectangle("fill", 0, 0, w, 0.5 * (h - height)) -- 上
lgRectangle("fill", 0, h, w, -0.5 * (h - height)) -- 下
lgRectangle("fill", 0, 0, 0.5 * (w - width), h) -- 左
lgRectangle("fill", w, 0, -0.5 * (w - width), h) -- 右
end
return TLfres
用例
local TLfres = require "tlfres"
local CANVAS_WIDTH = 800
local CANVAS_HEIGHT = 600
local POINT_SIZE = 1
function love.mouse.getPosition() -- 標準関数をヘルパー関数でオーバーライドします。
return TLfres.getMousePosition(CANVAS_WIDTH, CANVAS_HEIGHT)
end
function love.draw()
tlfres.beginRendering(CANVAS_WIDTH, CANVAS_HEIGHT)
love.graphics.setPointSize(tlfres.getScale()*POINT_SIZE) -- 点の大きさは自動的に変更されませんので、手動で乗算をしてください。
love.graphics.points(400, 300) -- 画面寸法の変更に関係なく描画は Canvas の中心で行います。
tlfres.endRendering() -- 黒色でレターボックスを描画します。
end