TexturedPolygon (日本語)

この関数はテクスチャによりテクスチャを施されたポリゴン (多角形) の Image を作成します。

function TexturedPolygon(polygon,texture, xx,yy,rr,sx,sy,ox,oy, smooth)

引数

polygon テクスチャを地点座標形式のテーブルで多角形にテクスチャを施します: {x1,y1, x2,y2, ...}

texture ImageData オブジェクトまたは画像のファイル名です。垂直・水平方向の加工を行い、多角形全体を塗り潰すために使用されます。

それ以外全ての引数は選択制です:

xx,yy,r,... は、ずらし、回転、および多角形に適用される前段階でのテクスチャに対する尺度変更を行う使用されます。それに関しては一枚の神であると考えることができ、変形されたテクスチャは反復された画像により塗り潰されており、ハサミで特定の図形を切り取るために多角形の地点座標を使用します。例えば、多角形自体がその場所で停止している間に、 xx の値を増加させると、テクスチャは右側へ移動します。

xx,yy テクスチャの座標 (原点)。

rr 次数による (原点と関連する) テクスチャの回転角度。

sx,xy x および x 軸に対するテクスチャの尺度係数 (原点と関連します)。

ox,oy テクスチャにおける原点の地点。それは回転および尺度の適用方法に影響を与えます。

標準では、変換を一切適用しません。この意味は: xx,yy,rr,sx,sy,ox,oy=0,0,0,1,1,0,0

smooth は画像の平滑化を行うかどうかを指定します (true または false)。平滑化された画像の見た目は良くなりますが、計算速度は遅くなります。標準で smooth は true に設定されています。

返値

関数は描画を行うのに非常に簡単なオブジェクトを返します:

{img, x,y, w,h, imgData}

ここでは:

img Image オブジェクトであり、 love.graphics.draw 関数により描画されます。

x,y どこに画像を描画するかどうか。このように使用します: love.graphics.draw(obj.img, obj.x,obj.y)

w,h 画像の幅と高さ。

imgData ImageData オブジェクトです。これを使用したい場合は、それに対する専門知識が必要です。

実装

関数は結果の画像としてピクセル(画素)単位で描画を行うために ImageData:mapPixel を使用します。多角形の領域外は完全に透過されたままになります。

全てのピクセルをすぐに計算する必要がある場合は、関数の処理時間はかなりかかります。 それ故に、例えばゲームまたは新しいレベルを読み込む上では、可能な限り使用は稀にしたほうが良いです。これは love.update 関数内で使用しようとはしないでください。まだ必要な場合は、 smooth を false に設定してから何が発生するのかを確認してください。

---

これ自体に関する詳細情報はソースコード本文を参照してください。それは同様に使用できる補助関数の一部に関しても有しています (まさに用例は正しく、勇敢なる巻物です)。

function TexturedPolygon(polygon,texture, xx,yy,rr,sx,sy,ox,oy, smooth) -- 画像の配列を返します。全て描画する場合は、テクスチャを施された多角形を表現します。
    if type(polygon)~="table" or #polygon%2~=0 then return nil end  -- 多角形は x1, y1, x2, y2 ... 形式のテーブルにする必要があります。
    if #polygon<6 then return nil end -- この行では nil を返します: ここではなにも描画しません。

    -- 必要であればテクスチャを読み込みます。
    if type(texture)=="string" then
        texture=love.image.newImageData(texture)
    end

    -- テクスチャ位置の引数に対する既定値。
    if xx==nil then xx=0 end
    if yy==nil then yy=0 end
    if rr==nil then rr=0 end
    if sx==nil then sx=1 end
    if sy==nil then sy=1 end
    if ox==nil then ox=0 end
    if oy==nil then oy=0 end

    if sx==0 then sx=1 end -- 悪い状況の回避。
    if sy==0 then sy=1 end

    rr=rr/180*3.14159 -- 次数を弧度へ変換します。

    if smooth==nil then smooth=true end -- 標準で綺麗なものを描画します。

    local bb=PolygonBoundingBox(polygon) -- 多角形の境界ボックス。

    -- simple==0 の意味は単純ではなく、1 の意味はテクスチャの変換を行ない、 2 の意味は x, y の値に対して丸め込み不要であることです。
    local simple=0
    if xx==0 and yy==0 and rr==0 and sx==1 and sy==1 and ox==0 and oy==0 then
        simple=1
        if bb.x==math.floor(bb.x) and bb.y==math.floor(bb.y) then
            simple=2
        end
    end
    -- さらに、 simple==3 の意味はテクスチャの変換は必要だが、利用者は平滑化された画像は不要であることです。
    if simple==0 and not smooth then 
        simple=3
    end

    -- 素晴らしいコードを最適化するために頻繁に使用される一部の数値を計算します。
    local cr,sr=math.cos(rr), math.sin(rr)
    local tw,th=texture:getWidth(), texture:getHeight()

    -- triangles は三角形の配列です (これは案内人です！)
    local triangles=nil
    if #polygon==6 then 
        triangles={polygon}
    else
        triangles=love.math.triangulate(polygon)
    end
    
    local imageData=love.image.newImageData(math.ceil(bb.w),math.ceil(bb.h)) -- ImageData を描画するために "空" にします。
                                                                             -- "空" の意味は全てのピクセル値が 0, 0, 0, 0 を有することを意味します。

    for i,triangle in ipairs(triangles) do -- 全ての三角形に対して...

        -- ピクセルが三角形内に存在するか 3 種類の尺度で調べるために必要です。
        -- 3 種類の線形関数を定義します y=a#+b#*(x-c#) or x=a#+b#*(y-c#) (側面の傾斜角に依存します)
        --m# は方式です: 上部 (1), 下部 (2), 右部 (3) または 左部 (4)
        --e#: この線が原点にある多角形の端であるかどうか: nil (false) あるいは x か y の範囲内 (true)
        local a0={}
        local b0={}
        local c0={}
        local m0={}
        local e0={}

        -- 三角形の地点にある組上に閉路を作成することを望みますが、 3 番目の組は (3,4) ではなく (1,3) です。

        -- 1 番目にある地点の組に関して。
        -- triangle[1]->x1, [2]->y1, [3]->x2, [4]->y2, [5]->x3, [6]->y3 であることに留意してください。
        if triangle[1]==triangle[3] or math.abs( (triangle[4]-triangle[2])/(triangle[3]-triangle[1]) ) > 1 then -- 傾斜角は垂直に近いです。
            m0[1]=2
        else
            m0[1]=1
        end
        if m0[1]==1 then -- 水平尺度
            a0[1],b0[1],c0[1] = triangle[2], (triangle[4]-triangle[2])/(triangle[3]-triangle[1]), triangle[1]
            if triangle[6] > a0[1] + b0[1]*(triangle[5]-c0[1]) then -- この尺度を別の地点にある三角形へ渡す方法を調べます。
                m0[1]=1 -- 上部の尺度
            else
                m0[1]=2 -- 下部の尺度
            end
        else -- 垂直尺度
            a0[1],b0[1],c0[1] = triangle[1], (triangle[3]-triangle[1])/(triangle[4]-triangle[2]), triangle[2]
            if triangle[5] > a0[1] + b0[1]*(triangle[6]-c0[1]) then -- この尺度を別の地点にある三角形へ渡す方法を調べます。
                m0[1]=3 -- 右部の尺度
            else
                m0[1]=4 -- 左部の尺度
            end
        end
        if PolygonEdgeLine(polygon, triangle[1],triangle[2],triangle[3],triangle[4]) then -- この線が多角形の端であるかどうかを調べます。
            if m0[1]==1 or m0[1]==2 or m0[1]==5 or m0[1]==6 then
                e0[1]={math.min(triangle[1],triangle[3]), math.max(triangle[1],triangle[3])} -- x の範囲内ならば true です。
            else
                e0[1]={math.min(triangle[2],triangle[4]), math.max(triangle[2],triangle[4])} -- y の範囲内ならば true です。
            end
        else
            e0[1]=nil -- いいえ、内部分割線です。
        end
        -- など...

        -- 2 番目にある地点の組に関して。
        if triangle[3]==triangle[5] or math.abs( (triangle[6]-triangle[4])/(triangle[5]-triangle[3]) ) > 1 then -- 傾斜角は垂直に近いです。
            m0[2]=2
        else
            m0[2]=1
        end
        if m0[2]==1 then -- 水平尺度
            a0[2],b0[2],c0[2] = triangle[4], (triangle[6]-triangle[4])/(triangle[5]-triangle[3]), triangle[3]
            if triangle[2] > a0[2] + b0[2]*(triangle[1]-c0[2]) then
                m0[2]=1 -- 上部の尺度
            else
                m0[2]=2
            end
        else -- 垂直尺度
            a0[2],b0[2],c0[2] = triangle[3], (triangle[5]-triangle[3])/(triangle[6]-triangle[4]), triangle[4]
            if triangle[1] > a0[2] + b0[2]*(triangle[2]-c0[2]) then
                m0[2]=3
            else
                m0[2]=4
            end
        end
        if PolygonEdgeLine(polygon, triangle[3],triangle[4],triangle[5],triangle[6]) then
            if m0[2]==1 or m0[2]==2 or m0[2]==5 or m0[2]==6 then
                e0[2]={math.min(triangle[3],triangle[5]), math.max(triangle[3],triangle[5])}
            else
                e0[2]={math.min(triangle[4],triangle[6]), math.max(triangle[4],triangle[6])}
            end
        else
            e0[2]=nil
        end

        -- 3 番目にある地点の組に関して。
        if triangle[1]==triangle[5] or math.abs( (triangle[6]-triangle[2])/(triangle[5]-triangle[1]) ) > 1 then -- 傾斜角は垂直に近いです。
            m0[3]=2
        else
            m0[3]=1
        end
        if m0[3]==1 then -- 水平尺度
            a0[3],b0[3],c0[3] = triangle[2], (triangle[6]-triangle[2])/(triangle[5]-triangle[1]), triangle[1]
            if triangle[4] > a0[3] + b0[3]*(triangle[3]-c0[3]) then
                m0[3]=1
            else
                m0[3]=2
            end
        else -- 垂直尺度
            a0[3],b0[3],c0[3] = triangle[1], (triangle[5]-triangle[1])/(triangle[6]-triangle[2]), triangle[2]
            if triangle[3] > a0[3] + b0[3]*(triangle[4]-c0[3]) then
                m0[3]=3
            else
                m0[3]=4
            end
        end
        if PolygonEdgeLine(polygon, triangle[1],triangle[2],triangle[5],triangle[6]) then
            if m0[3]==1 or m0[3]==2 or m0[3]==5 or m0[3]==6 then
                e0[3]={math.min(triangle[1],triangle[5]), math.max(triangle[1],triangle[5])}
            else
                e0[3]={math.min(triangle[2],triangle[6]), math.max(triangle[2],triangle[6])}
            end
        else
            e0[3]=nil
        end

        local function func(x,y,r,g,b,a) -- ImageData の多角形に mapPixel メソッドを適用する関数です。
            if r~=0 or g~=0 or b~=0 or a~=0 then return r,g,b,a end -- ピクセルは既に描画されているため、処理を飛ばします。

            x=x+bb.x -- 結果として画像の座標から内部テクスチャの座標まで進みます。
            y=y+bb.y

            local alpha=1 -- 円滑化された角の透過 (if smooth==true の使用時のみ)

            -- 全ての第 3 尺度を確認します。
            for j=1,3 do

                if m0[j]==1 then
                    local y0=a0[j]+b0[j]*(x-c0[j]) -- なにと比較を行うかどうか。
                    if smooth and e0[j]~=nil and x>=e0[j][1] and x<e0[j][2] then -- 角を平滑化する必要があるかどうか。
                        local z=y0-y -- 理想的な端の位置から離れています。
                        if z>1 then -- 離れすぎている。
                            return 0,0,0,0
                        elseif z>0 then -- 平滑化されたピクセルの端にある領域内にあります。
                            alpha=alpha*(1-z)
                        end
                    elseif y<y0 then -- 三角形の範囲外にあります。
                        return 0,0,0,0
                    end
                    -- など...

                elseif m0[j]==2 then
                    local y0=a0[j]+b0[j]*(x-c0[j])
                    if smooth and e0[j]~=nil and x>=e0[j][1] and x<e0[j][2] then
                        local z=y0-y
                        if z<0 then
                            return 0,0,0,0
                        elseif z<1 then
                            alpha=alpha*z
                        end
                    elseif y>=y0 then
                        return 0,0,0,0
                    end

                elseif m0[j]==3 then
                    local x0=a0[j]+b0[j]*(y-c0[j])
                    if smooth and e0[j]~=nil and y>=e0[j][1] and y<e0[j][2] then
                        local z=x0-x
                        if z>1 then
                            return 0,0,0,0
                        elseif z>0 then
                            alpha=alpha*(1-z)
                        end
                    elseif x<x0 then
                        return 0,0,0,0
                    end

                elseif m0[j]==4 then
                    local x0=a0[j]+b0[j]*(y-c0[j])
                    if smooth and e0[j]~=nil and y>=e0[j][1] and y<e0[j][2] then
                        local z=x0-x
                        if z<0 then
                            return 0,0,0,0
                        elseif z<1 then
                            alpha=alpha*z
                        end
                    elseif x>=x0 then
                        return 0,0,0,0
                    end

                end
            end

            if simple==0 then -- 複雑な事例。
                r,g,b,a=getAveragePixel(texture, ((x+0.5-xx)*cr+(y+0.5-yy)*sr)/sx+ox, ((y+0.5-yy)*cr-(x+0.5-xx)*sr)/sy+oy, tw,th)
            elseif simple==1 then -- 単純な事例。
                r,g,b,a=texture:getPixel( math.floor(x)%tw, math.floor(y)%th)
            elseif simple==2 then -- さらに単純な事例。
                r,g,b,a=texture:getPixel( x%tw, y%th)
            else--if simple==3 then -- 汚いが、早い事例。
                r,g,b,a=texture:getPixel( math.floor(((x-xx)*cr+(y-yy)*sr)/sx+ox)%tw, math.floor(((y-yy)*cr-(x-xx)*sr)/sy+oy)%th)
            end

            if smooth then a=a*alpha end -- 端を綺麗にすることができます。
            --return texture:getPixel( (x)%texture:getWidth(), (y)%texture:getHeight())
            return r,g,b,a
        end

        imageData:mapPixel(func) -- ImageData に三角形の描画を一つ以上適用します。
    end

    local image=love.graphics.newImage(imageData) -- 描画可能なオブジェクトの作成。

    return {img=image, x=bb.x,y=bb.y,w=bb.w,h=bb.h, imgData=imageData}
end

function PolygonBoundingBox(polygon) -- 多角形に対して最大・最小 x, y 座標の判定、および BoundingBox オブジェクト形式 {x,y,w,h} で返す単純な関数です。
    if type(polygon)~="table" or #polygon<2 or #polygon%2~=0 then return nil end

    local minX=polygon[1]
    local maxX=polygon[1]
    local minY=polygon[2]
    local maxY=polygon[2]

    for i=1,#polygon,2 do
        if polygon[i]<minX then minX=polygon[i] end
        if polygon[i]>maxX then maxX=polygon[i] end
        if polygon[i+1]<minY then minY=polygon[i+1] end
        if polygon[i+1]>maxY then maxY=polygon[i+1] end
    end

    return {x=minX,y=minY,w=maxX-minX,h=maxY-minY}
end

function PolygonEdgeLine(polygon, x1,y1,x2,y2) -- 既存の地点にある組がある多角形の端に属するかどうかを調べるために特定を行う関数です。
    local length=#polygon
    if type(polygon)~="table" or length<4 or length%2~=0 then return nil end

    local buf={} -- これらの値が丸め込まれている場合に限り (例えば、二桁まで)、非整数値の比較は安全です。
    for i,v in ipairs(polygon) do
        buf[i]=math.floor(v*100)/100
    end

    local x1=math.floor(x1*100)/100
    local y1=math.floor(y1*100)/100
    local x2=math.floor(x2*100)/100
    local y2=math.floor(y2*100)/100

    for i=1,length-2,2 do -- 最後の線以外をすべて比較します。
        if buf[i]==x1 and buf[i+1]==y1 and buf[i+2]==x2 and buf[i+3]==y2 then
            return true
        elseif buf[i]==x2 and buf[i+1]==y2 and buf[i+2]==x1 and buf[i+3]==y1 then
            return true
        end
    end

    -- 最後の線を別に比較します。
    if buf[1]==x1 and buf[2]==y1 and buf[length-1]==x2 and buf[length]==y2 then
        return true
    elseif buf[1]==x2 and buf[2]==y2 and buf[length-1]==x1 and buf[length]==y1 then
        return true
    end

    -- 全ての検査を以前に合格した場合は、失敗します:
    return false
end

function getAveragePixel(texture, x,y,w,h) --テクスチャ周辺の x, y 座標と近接するピクセルに対して平均化された色を返します。コードの高速化のために w, h は事前計算されます。
    local x1,x2,y1,y2 = math.floor(x), math.ceil(x), math.floor(y), math.ceil(y) -- 索引化されたピクセルの隣接値整数を検出します。
    if x2==x1 then x2=x2+1 end
    if y2==y1 then y2=y2+1 end

    local d1,d2,d3,d4 = (x2-x)*(y2-y), (x-x1)*(y2-y), (x2-x)*(y-y1), (x-x1)*(y-y1) -- 結果としてピクセルある少数部を検出します。

    x1=x1%w -- テクスチャが範囲内にあることを保証します (周囲の加工)。
    x2=x2%w
    y1=y1%h
    y2=y2%h

    local r1,g1,b1,a1 = texture:getPixel(x1,y1) -- 生の 4 色を取得します。
    local r2,g2,b2,a2 = texture:getPixel(x2,y1)
    local r3,g3,b3,a3 = texture:getPixel(x1,y2)
    local r4,g4,b4,a4 = texture:getPixel(x2,y2)

    --...そして全ての平均を返します。
    return d1*r1+d2*r2+d3*r3+d4*r4, d1*g1+d2*g2+d3*g3+d4*g4, d1*b1+d2*b2+d3*b3+d4*b4, d1*a1+d2*a2+d3*a3+d4*a4
end

動作状態を確認するには用例を実行します:

require "textured_polygon" -- TexturedPolygon 関数のあるファイルを呼び出すか、またはこの下に内容を貼り付けてください。

function love.load()
    texture=love.image.newImageData('texture.png')
    bkg=love.graphics.newImage(texture)
    polygon={100,100, 200,100, 300,200, 400,100, 520,100, 530,200, 400,200, 300,300, 200,200, 100,200}

    t_start=love.timer.getTime()
    
    image=TexturedPolygon(polygon,'texture.png')

    t_end=love.timer.getTime()

    love.graphics.setBackgroundColor(128,50,100)
end
 
function love.draw()
    love.graphics.draw( bkg, 0,20, 0, 10,10)
    love.graphics.draw( image.img, image.x, image.y)

    love.graphics.print("Spent "..(t_end-t_start).." seconds to create textured polygon")
    love.graphics.print("<- see theese pixels smoothed!", 530,140)
    love.graphics.print("| works with concave polygons as well!", 302,80)
    love.graphics.print("V                                     ", 300,90)
    love.graphics.print("^                           ", 420,200)
    love.graphics.print("| semi-transparent textures!", 422,205)
end

---

このテクスチャを使用しています:

---

動作状態: