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.
Post Reply
User avatar
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?

Post by Echo » Wed May 08, 2013 2:27 pm

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.

User avatar
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?

Post by micha » Wed May 08, 2013 3:19 pm

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.

User avatar
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?

Post by Echo » Wed May 08, 2013 3:33 pm

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? )

User avatar
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?

Post by T-Bone » Wed May 08, 2013 4:17 pm

I think the Karma system is gone, probably forever.

User avatar
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?

Post by micha » Wed May 08, 2013 4:23 pm

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).

User avatar
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?

Post by Echo » Fri May 10, 2013 9:42 am

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 (*_*)

User avatar
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?

Post by Echo » Fri May 10, 2013 1:13 pm

I tried running the code but I get an error message (attached)
Attachments
error.png
error message
error.png (3.17 KiB) Viewed 1460 times

User avatar
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?

Post by Echo » Fri May 10, 2013 1:15 pm

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
(1 KiB) Downloaded 48 times

User avatar
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?

Post by micha » Fri May 10, 2013 1:32 pm

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.

Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 6 guests