How can I use Canvases to create a page buffer system?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Echo
Prole
Posts: 46
Joined: Fri Jul 13, 2012 4:50 pm
Location: Lucid Moon

How can I use Canvases to create a page buffer system?

I am making a page buffer with the following code. So far I think it will work but I have a little trouble understanding how I can manipulate Canvas functions to make a smooth page buffer .

How this is meant to work:
>I creat a variable for a previouse page, a current page and a next page using tables anc concatenation string functions
>The page number will be a variable "n" which is increased or decreased when I press "x" and "z" respectively
>The next page is held in a canvas and so is the previouse page while the current page is on screen
>This acts as a buffer so when I use the page navigators z and x the images are easily loaded on the screen

Here is my (as real as possible) code.

Code: Select all

function love.load()
--note: all pages must be named as numbers e.g "3.png" not "page3.png"
n = 0 --initial page number
xn = toString(n+1) --next page number
xp = toString(n-1) --previouse page number
if xp == "-1" then
xp = "0"
end
--limits xp to 0 so they are no negative numbers
ext = ".png" --the image file extension

page = {} --creates page as a table
page.next = love.graphics.newImage(xn .. ext) --next page is loaded here
page.prev = love.graphics.newImage(xp .. ext) --previouse page is loaded here
page.num = toString(n)
page.now = love.graphics.newImage(page.num .. ext) --current page is loaded here
end


Then I want to manipulate "n" using function love.keyreleased

Code: Select all

function love.keyreleased(key)
--EDIT: added an "and" to limit n not to be negative

if key == "z" and (n > 0) then --previouse navigator
n = n - 1
num = toString(n)
xp = toString(n-1) --updates n and xp on key release
end
if key == "x" then --next navigator
n = n + 1
num = toString(n)
xn = toString(n+1) --updates n and xn on key release
end
end

EDIT: Then I wanted to use

Code: Select all

function love.draw()
--draw page.now to screen
--draw page.prev to a canvas.prev
--draw page.next to a canvas.next
end

But I'm a little confused on how to do this last part even after reading on Canvas functions.
Last edited by Echo on Fri May 10, 2013 9:54 am, edited 7 times in total.
micha
Inner party member
Posts: 1083
Joined: Wed Sep 26, 2012 5:13 pm

Re: How can I use Canvases to create a page buffer?

If in your case the total image only consists if the content of one image-file (*.png) then you don't really need a canvas. You can just hand around the Image itsself.
For example, if you go to the next page you can do this:

Code: Select all

page.prev = page.now
page.now = page.next or love.graphics.newImage(xn .. ext)
page.next = nil
How many images do you have all together? If these are not so many, you can load them all. And you don't need a buffer.
Echo
Prole
Posts: 46
Joined: Fri Jul 13, 2012 4:50 pm
Location: Lucid Moon

Re: How can I use Canvases to create a page buffer system?

I want to make a visual novel system so I'm not sure how many pages the user will use.
wont the nil function delete the page.next variable permanently?
It needs to be so that its a continouse system regardless of how many pages you want to use.
But maybe the Canvases might be a bit too much, (I can see how it will be a lot simpler without them)... I think that its supposed to be faster with canvases right?

(Unrelated: Where do I give someone Karma? )
T-Bone
Inner party member
Posts: 1492
Joined: Thu Jun 09, 2011 9:03 am

Re: How can I use Canvases to create a page buffer system?

I think the Karma system is gone, probably forever.
micha
Inner party member
Posts: 1083
Joined: Wed Sep 26, 2012 5:13 pm

Re: How can I use Canvases to create a page buffer system?

Okay, then a Canvas is not what you need. A canvas is an intermediate render target. You could use a canvas for example if you program a strategy game with a map in the background and then a layer of building and then a layer of units on top. The units move each frame, but the buildings and the background map do not. So you could draw the background to a canvas and the buildings to another canvas and each frame just copy these canvases onto the screen. If the rendering of the background is computationally demanding, then this might save some time, because you only need to update the background, when it is really necessary. I hope this explained, what a canvas can be useful for.

In your case, the images is not really rendered in a complex way, but just one image on your disc. So canvas is not needed.

Before you use too much time on a page buffer system, I suggest you first try it without a page buffer: Whenever the page changes, then simply load the next picture from hard disc. Only if this is not as fast as you would like, you should build a buffer system (otherwise this is called premature optimization).
Echo
Prole
Posts: 46
Joined: Fri Jul 13, 2012 4:50 pm
Location: Lucid Moon

Re: How can I use Canvases to create a page buffer system?

I updated the code and loosely based it off your idea. Thanks man ( for clearing up the noise I had about Canvases ). I think this will work, I just need to get some pages and test this thing for real.

EDIT "num" is now "page.num" in my code

Code: Select all

function love.keyreleased(key)
if key == "z" and (n>0) then --previose button
page.now = page.prev
--update n, page.num and xp after setting page.now
n = n-1 --updates n
page.num = toString(n) --updates page.num
xp = toString(n-1) --updates xp
end
if key == "x" then --next button
page.now = page.next
--updates n, page.num and xn after
n = n+1 --updates n
page.num = toString(n) --updates page.num
xp = toString(n+1) --updates xn
end
end


Code: Select all

function love.draw
love.graphics.draw(page.now,x,y) --note: x = screen width  and y = screen height
end

How do I get the screen width and screen height?
Also I only think it would need a heavy buffer if this thing was animated, but visual novels are read step by step using mostly still images. I might use canvases for stuff like text boxes and torso shots over the background page but lets leave that for later. Thanks again I would give Karma but I dont know where (*_*)
Echo
Prole
Posts: 46
Joined: Fri Jul 13, 2012 4:50 pm
Location: Lucid Moon

Re: How can I use Canvases to create a page buffer system?

I tried running the code but I get an error message (attached)
Attachments
error message
error.png (3.17 KiB) Viewed 2505 times
Echo
Prole
Posts: 46
Joined: Fri Jul 13, 2012 4:50 pm
Location: Lucid Moon

Re: How can I use Canvases to create a page buffer system?

Here is a copy of my file. I saved it as a zip file so you can unzip and check out the code on notepad++ or whatever you guys use.

Here is the code if you don't want to download anything and have virus paranoia (<_<)

main.lua

Code: Select all

function love.load()
n = 1
xn = toString(n + 1) --next n
xp = toString(n - 1) --previouse n
if xp == "-1" then
xp = "0"
end
ext = ".png"
page = {} --page table
page.next = love.graphics.newImage(xn .. ext)
page.prev = love.graphics.newImage(xp .. ext)
page.num = toString(n)
page.now = love.graphics.newImage(page.num .. ext)
end

key.lua

Code: Select all

function love.keyreleased(key)
if key == "z" and (n>0) then --previouse button
page.now = page.prev
n = n - 1
page.num = toString(n)
xp = toString(n-1)
end
if key == "x" then --previouse button
page.now = page.prev
n = n + 1
page.num = toString(n)
xn = toString(n+1)
end
end

draw.lua

Code: Select all

function love.draw
x = 0 --temporary untill grid system
y = 0 --temporary untill grid system
love.graphics.draw(page.now,x,y)
end

Attachments
lunardemo.zip
attached project as lunardemo.zip
micha
Inner party member
Posts: 1083
Joined: Wed Sep 26, 2012 5:13 pm

Re: How can I use Canvases to create a page buffer system?

Echo wrote:I tried running the code but I get an error message (attached)
When löve throws an error, it gives you a short description, where you can look for the error. Don't shy away from reading this.

In your case it is in main.lua in line 3. It says "attempt to call global "toString" (a nil value).
This means that in this line in your main.lua löve tries to call a function named "toString", but finds that the variable "toString" does not exist (is nil). I haven't used tostring before but I believe you have to write it with a lower case "s".

Also: People can help you more easily, if you pack your code into a .love -file. To create this, put everything into a .zip-file and then rename this .zip file to .love. Search the forum or ask, if you don't know how to do that.

Who is online

Users browsing this forum: No registered users and 50 guests