Page 1 of 1

Vector graphics and colors.

Posted: Mon Jul 20, 2009 8:45 pm
by ub3rl1t
so i draw a fish in vector graphics.

Code: Select all

	love.graphics.circle(1,xf,yf,R2);
	love.graphics.circle(1,xf - 20,yf - 10 , R2 / 2);
	love.graphics.line(xf - R2,yf + R2 / 2,xf - 2,yf + 2);
	love.graphics.triangle(1, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(1, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(1, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	if debuglove == true then
		love.graphics.draw("Fish Model 1" .. "\nSam" .. "\nX = " .. xf .. " Y = " .. yf , xf - R2,yf + R2 + 18);
	end
now i want to fill it in and use different colors, how can i do that?

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 8:47 pm
by bartbes
Instead of 1 (which I guess is love.draw_line, please use those constants..) use love.draw_fill and set the color before doing so? You might want to keep this code for drawing an outline first though.

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 8:53 pm
by ub3rl1t
Another question sir. How difficult would it be to make my fish drawing into a class so i can draw multiple fish?

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 10:17 pm
by CharWirtanen
Edit: -- See next reply with fix.

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 10:59 pm
by ub3rl1t
thanks a lot!

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 11:00 pm
by ub3rl1t
can someone please tell me why this does not work properly, im trying to fill on part of the tail in with a color but it goes invisible.

Code: Select all

function draw()
	
	love.graphics.setLineStyle(love.line_smooth);
	
	--fish
	love.graphics.setColor(255,215,0);
	love.graphics.circle(love.draw_fill,xf,yf,R2);
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf,yf,R2);
	
	love.graphics.setColor(255,255,255);
	love.graphics.circle(love.draw_fill,xf - 20,yf - 10 , R2 / 2);
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf - 20,yf - 10 , R2 / 2);
	love.graphics.line(xf - R2,yf + R2 / 2,xf - 2,yf + 2);

	love.graphics.triangle(love.draw_fill, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	if debuglove == true then
		love.graphics.draw("Fish Model 1" .. "\n      Sam" .. "\n        X = " .. xf .. " Y = " .. yf , xf - 120,yf + R2 - 20);
	end
	love.graphics.setColor(255,255,255);
end

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 11:29 pm
by CharWirtanen
Just realized my last example didnt work at all, so I went ahead and actually fired up love and made this example for you. Left-click anywhere on the screen to add a fish.

Code: Select all

-- Fish ---------------------------------
-----------------------------------------
Fish = Fish or {} -- Declare fish class
Fish_mt = {} -- Declare a metatable to handle it
Fish_mt.__index = Fish -- Tie our metatable to our class

-- Constructor for a specifically colored fish
function Fish.new(fill_mode, xf, yf, R2, r, g, b)
	-- Create a metatable for our object
	local metatable = {
		fill_mode = fill_mode, 
		xf = xf, 
		yf = yf, 
		R2 = R2,
		r = r,
		g = g,
		b = b
	}
	return setmetatable(metatable, Fish_mt)
end

-- Constructor for a random colored fish
function Fish.newRandom(fill_mode, xf, yf, R2)
	-- Assign random RGB values and then
	-- call specific color constructor
	local r = math.random(0, 255)
	local g = math.random(0, 255)
	local b = math.random(0, 255)
	local a = math.random(0, 255)
	return Fish.new(fill_mode, xf, yf, R2, r, g, b)
end

-- Draws the fish when called in draw()
function Fish:draw()
	local fill_mode = self.fill_mode
	local xf = self.xf
	local yf = self.yf
	local R2 = self.R2
	local fish_debug = self.debug
	local r = self.r
	local g = self.g
	local b = self.b
	
	-- Store our current color so we don't lose it.
	local color = love.graphics.getColor()
	
	-- Paint with the colors defined by our object
	love.graphics.setColor(r, g, b)
	
	-- Paint the fish.
	love.graphics.circle(fill_mode, xf, yf, R2);
	love.graphics.circle(fill_mode, xf - 20, yf - 10, R2 / 2);
	love.graphics.line(xf - R2, yf + R2 / 2, xf - 2, yf + 2);
	love.graphics.triangle(fill_mode, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(fill_mode, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(fill_mode, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12);
	
	-- Return our colors back to what they were before
	love.graphics.setColor(color)

	if lovedebug == true then
		love.graphics.draw("Fish Model 1\nSam\nX = " .. xf .. " Y = " .. yf, xf - R2, yf + R2 + 18);
	end
end

-- LÖVE ---------------------------------
-----------------------------------------
function load()
	-- Declare a table to hold our new fish collection.
	ABunchOfFish = {}
   
	-- Create a new fish to start with in the middle, and
	-- then add it to our fish table.
	local fish1 = Fish.newRandom(love.draw_fill, 400, 300, math.random(20,100))
	table.insert(ABunchOfFish, fish1)
end

-- Callback for mouseclick events
function mousepressed(x, y, button) 
	-- See if the user clicked the lrft 
	-- mouse button.
	if button == love.mouse_left then 
		-- If they did, create a new fish with a random
		-- size at the mouse-click location and add it
		-- to our collection to be displayed in the draw()
		-- callback
		local fish = Fish.newRandom(love.draw_fill, x, y, math.random(20,100))
		table.insert(ABunchOfFish, fish)
	end
end

function draw()
	-- Loop through our table of fish and
	-- draw all of them.
	for i, v in ipairs(ABunchOfFish) do
		v:draw()
	end
end

Re: Vector graphics and colors.

Posted: Mon Jul 20, 2009 11:32 pm
by CharWirtanen
ub3rl1t wrote:can someone please tell me why this does not work properly, im trying to fill on part of the tail in with a color but it goes invisible.

Code: Select all

function draw()
	
	love.graphics.setLineStyle(love.line_smooth);
	
	--fish
	love.graphics.setColor(255,215,0);
	love.graphics.circle(love.draw_fill,xf,yf,R2);
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf,yf,R2);
	
	love.graphics.setColor(255,255,255);
	love.graphics.circle(love.draw_fill,xf - 20,yf - 10 , R2 / 2);
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf - 20,yf - 10 , R2 / 2);
	love.graphics.line(xf - R2,yf + R2 / 2,xf - 2,yf + 2);

	love.graphics.triangle(love.draw_fill, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	if debuglove == true then
		love.graphics.draw("Fish Model 1" .. "\n      Sam" .. "\n        X = " .. xf .. " Y = " .. yf , xf - 120,yf + R2 - 20);
	end
	love.graphics.setColor(255,255,255);
end
I'm not sure what color the tail is because there are no comments, but shapes are drawn overlapping eachother in order from first drawn to last, so make sure that nothing is occluding the tail.

Re: Vector graphics and colors.

Posted: Sun Jul 26, 2009 4:28 am
by Jasoco
Draw the FILLED shape first. Then the OUTLINE second. If you do it the other way, the filled shape will draw over the outlined one.

Re: Vector graphics and colors.

Posted: Sun Jul 26, 2009 5:15 am
by Pliskin09
offtopic;

thanks for the example code CharWirtanen. its really helpful in understanding how to structure games. ^^