# 3D Billboards and table coordinates

How could I make a billboard sprite appear at a certain coordinate according to my table(like the hero variable)?

My code

``````--# Main

-- Use this function to perform your initial setup
displayMode(FULLSCREEN)
function setup()
music("A Hero's Quest:Dungeon", true)
stick = Stick()
anglex=0
angley=0
pylon = Wall("Documents:grate")
wall = Wall("Documents:marble")
floor = Floor("Documents:white floor")

world = World()
hero = Hero(3,3)
time = 0
TO_DEG = 180/math.pi

end

-- This function gets called once every frame
function draw()

background(76, 76, 76, 255)

font("Arial-BoldMT")
fill(255, 0, 236, 255)
fontSize(20)
time = time +0.02

local TO_DEG = TO_DEG
local hero = hero
perspective(60)
x, z=math.sin(a) *1000, -math.cos(a)*1000
y=math.sin(b) *1000, -math.cos(b)*1000
camera(hero.x,0,hero.z,  x,y,z)

pushMatrix()
world:draw()
popMatrix()

-- Draw hero

-- roll animation
if stick.active then
rotate(-ElapsedTime*10*TO_DEG/2, 0, 0, 1)
end

scale(.25, .25, .25)
hero:draw()

-- Restore orthographic projection
ortho()
viewMatrix(matrix())
resetMatrix()

sprite("Cargo Bot:Background Fade", WIDTH/2, HEIGHT/2, WIDTH, HEIGHT)

if stick.active then
local ceil = math.ceil
stick:draw()

-- move hero if stick is used

local mvt = (vec2(hero.x-x,hero.z-z):normalize())/50 * stick.dist
hero.x = hero.x + 0-mvt.x
hero.z = hero.z + 0-mvt.y

-- convert to table coordinates
hero.px = ceil(hero.x - .5)
hero.py = ceil(hero.z - .5)

-- lazy collision check
if world.data[hero.py][hero.px] ~= 0 then
hero.x = hero.x + mvt.x
hero.z = hero.z + mvt.y
hero.px = ceil(hero.x + .5)
hero.py = ceil(hero.z + .5)
end
end
end

function touched(touch)

if touch.x<WIDTH/2 then stick:touched(touch) else
anglex = anglex +touch.deltaX/3
angley = angley + touch.deltaY/3
end
end

--# World
World = class()

function World:init()

-- define the world
self.data =
{
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1},
{1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1},
{1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1},
{1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1},
{1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1},
{1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1},
{1, 1, 2, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1},
{1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ,1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}

}
end

function World:draw()
local floor, wall, pylon = floor, wall, pylon
local offSet = 10
local px, py = hero.px, hero.py

-- look around the hero to draw whatever is around him
translate(px - offSet, 0, py - offSet)
for y = py - offSet, py + offSet do
for x = px - offSet, px + offSet do
if self.data[y] then
local val = self.data[y][x]
if val == 0 then
floor:draw()
elseif val == 1 then
wall:draw()
elseif val == 2 then
pylon:draw()
end
end
translate(1,0,0)
end
translate(-(1 + 2 * offSet), 0, 1)
end
end

--# Hero
Hero = class()

function Hero:init(x, z)
self.x, self.y, self.z = x,0,z
self.px, self.py = math.ceil(.5+x), math.ceil(.5+z)

self.mdl = Wall("Documents:StoneTile")
end

function Hero:draw()
self.mdl:draw()
end

--# Wall
Wall = class()

function Wall:init(tex)
-- all the unique vertices that make up a cube
local vertices =
{
vec3(-0.5, -0.5,  0.5), -- Left  bottom front
vec3( 0.5, -0.5,  0.5), -- Right bottom front
vec3( 0.5,  0.5,  0.5), -- Right top    front
vec3(-0.5,  0.5,  0.5), -- Left  top    front
vec3(-0.5, -0.5, -0.5), -- Left  bottom back
vec3( 0.5, -0.5, -0.5), -- Right bottom back
vec3( 0.5,  0.5, -0.5), -- Right top    back
vec3(-0.5,  0.5, -0.5), -- Left  top    back
}

-- now construct a cube out of the vertices above
local verts =
{
-- Front
vertices[1], vertices[2], vertices[3],
vertices[1], vertices[3], vertices[4],
-- Right
vertices[2], vertices[6], vertices[7],
vertices[2], vertices[7], vertices[3],
-- Back
vertices[6], vertices[5], vertices[8],
vertices[6], vertices[8], vertices[7],
-- Left
vertices[5], vertices[1], vertices[4],
vertices[5], vertices[4], vertices[8],
-- Top
vertices[4], vertices[3], vertices[7],
vertices[4], vertices[7], vertices[8],
-- Bottom
vertices[5], vertices[6], vertices[2],
vertices[5], vertices[2], vertices[1],
}

-- all the unique texture positions needed
local texvertices =
{
vec2(0,0),
vec2(1,0),
vec2(0,1),
vec2(1,1)
}

-- apply the texture coordinates to each triangle
local texCoords =
{
-- Front
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
-- Right
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
-- Back
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
-- Left
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
-- Top
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
-- Bottom
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
}

self.model = mesh()
self.model.vertices = verts
self.model.texture = tex
self.model.texCoords = texCoords
self.model:setColors(255,255,255,255)
end

function Wall:draw()
self.model:draw()
end

--# Floor
Floor = class()

function Floor:init(tex)
-- all the unique vertices that make up a cube
local vertices =
{
vec3( 0.5,  -0.5,  0.5), -- Right top    front
vec3(-0.5,  -0.5,  0.5), -- Left  top    front
vec3( 0.5,  -0.5, -0.5), -- Right top    back
vec3(-0.5,  -0.5, -0.5), -- Left  top    back
}

-- now construct a cube out of the vertices above
local verts =
{
-- Bottom
vertices[3], vertices[4], vertices[2],
vertices[3], vertices[2], vertices[1],
}

-- all the unique texture positions needed
local texvertices =
{
vec2(0,0),
vec2(1,0),
vec2(0,1),
vec2(1,1)
}

-- apply the texture coordinates to each triangle
local texCoords =
{
-- Bottom
texvertices[1], texvertices[2], texvertices[4],
texvertices[1], texvertices[4], texvertices[3],
}

self.model = mesh()
self.model.vertices = verts
self.model.texture = tex
self.model.texCoords = texCoords
self.model:setColors(255,255,255,255)
end

function Floor:draw()
self.model:draw()
end

--# Stick
Stick = class()

function Stick:init()
self.direction = 0
self.dist = 0

self.active = false
self.origin = vec2(150, 150)
self.center = self.origin
self.pos = self.origin

self.vec=vec2(0,0)
end

function Stick:draw()
sprite(self.stick_bg, self.center.x, self.center.y)
sprite(self.stick, self.pos.x, self.pos.y)
end

function Stick:touched(touch)
if touch.state == BEGAN then
self.center = vec2(touch.x, touch.y)
self.active = true
end

self.pos = vec2(touch.x, touch.y)
self.direction = math.atan2(self.pos.y - self.center.y, self.pos.x - self.center.x)
self.dist = math.min(2, self.pos:dist(self.center)/32)
self.vec=(self.center-self.pos):normalize()
print(self.vec)
if touch.state == ENDED then
self.center = self.origin
self.pos = self.center
self.active = false
end

end

``````

ummm, sprite(img, table.paramAForX, table.paramBForY)… you should explain further, and also read how the sprite() method works.

@matkatmusic that’s how it works in 2D in 3D it’s a little different. I didn’t specify but this question is actually about 3D

edit: it seems that you added code to this thread, which wasn’t there when I posted.

—^ look at my discussion title

@matkatmusic Actually, it’s been there since I made the discussion. Look at the time of the post.

It’s not that different in 3D. Why not just create a basic square mesh and put a texture on it, then translate it to some coordinates and draw it?

@SkyTheCoder I guess I could do it that way. I just wanted to know though how I could use the table as a coordinate system for it though. See the “hero” variable in setup. Kind of like that.

@SkyTheCoder any ideas?

You could try reading some of my posts or ebook about 3D, that would save you some questions.

Basically, you translate to the point where you want the picture, then sprite it. Simple enough, but you also want to rotate it to face the camera, which is the next question you are going to ask.

Actually @Ignatz I already know a way to rotate them to face the camera. I just want to know how to apply the billboard sprite to specific coordinates on my table eg (3,5)

Translate to the place on the screen, then sprite the image

Yes, so how would I do that in relation to table coordinates.

Look at my code at the top of the post and find the hero variable.

I mean like that

If you don’t know how to turn table coordinates into screen positions, you’re nowhere near ready to begin developing 3D apps.

(I was puzzled about why you would have trouble with this if you were able to write all the other code - then I discovered you had copied the code from an earlier post on the forum, maybe from here).

@Ignatz Actually, I believe it was a game base from @xavier.

@Toxyn If I understand you correctly, you want to make a class for the billboard. So…make a class for it.

@SkyTheCoder yeah, I’m just messing around with it and seeing what I can do with it

And no, I want to know how to apply the billboard to the coordinates the way Hero variable is set. It seems like an interesting concept and could streamline things. Basically being able to make a variable called e.g “Billboard” and set its coordinates to (3,5)