Assigning an image to consecutive tables using 'for loop'

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
aoylerorkis
Prole
Posts: 1
Joined: Tue Aug 27, 2019 12:32 pm

Assigning an image to consecutive tables using 'for loop'

Post by aoylerorkis » Tue Aug 27, 2019 1:29 pm

Hello, I'm new to programming. Currently, I'm in need of help with my code.

How I want the application to work: Create 5 images of column to fill up the window horizontally.

How I wrote the code to accomplish my idea:
-First, create table 'coltable'. Next, make table 'i'.
-The image file of the column is 32x128 in dimensions. The window size is 320x256. By using ' love.graphics.scale( 2,2 ) ', the column would be 64x256. So, to fill the window with columns, a number of exactly 5 columns would be needed. Moreover, they have to be 64px apart (from top left corner). Additionally, I wanted the 5 columns to be 5 individual tables with each of them having their own image file.
-I didn't want to manually type in the coordinates for each column so I tried using 'for loop'. I create value 'colx' and assign it a 0 ( colx = 0 ). After each loop, 64 is added to colx ( colx = colx + 64 ).
-With each loop, a column will be drawn next to the preceding one, eventually, the screen would be filled with columns.
-The loop goes from 1 to 5. At the end of the loop, I should have these indexes: coltable[1].img , coltable[2].img, coltable[3].img, coltable[4].img , coltable[5].img . 5 columns holding their own images.

The code:

Code: Select all

--Create table to store individual columns
coltable = {}
--Values to insert individual columns to coltable
i = {}
--Coordinate to draw columns
colx = 0

function love.load()
    --Change window size
    --Change filter
    love.window.setMode( 320, 256 )
    love.graphics.setDefaultFilter( 'nearest', 'nearest' )
end

--Create individual columns
--Insert image to individual columns
for i = 1, 5 do
    coltable[i] = {}
    coltable[i].img = love.graphics.newImage('col.png')
end

function love.draw()
    --Scale 200%
    love.graphics.scale( 2, 2 )
    --Draw column sprites
    for i = 1, 5 do
        love.graphics.draw(coltable[i].img, colx, 0)
        colx = colx + 2
        -- Supposedly 64 but I add only 2 so it's easier to see how it fails to work properly in action
    end
end
The result: Instead of 5 columns, there is only a single image moving horizontally, which means that the 'for loop' works.

What it should look like:
Image
What it looked like:
Image
(The photo is static but the column does move horizontally in motion)

I'm not sure what I understood wrong. Thanks for reading.
Attachments
column.love
(724 Bytes) Downloaded 51 times

bobbyjones
Party member
Posts: 720
Joined: Sat Apr 26, 2014 7:46 pm

Re: Assigning an image to consecutive tables using 'for loop'

Post by bobbyjones » Tue Aug 27, 2019 11:09 pm

So your code needs more critiques than what I can provide right now so hopefully, someone else will help with that but the problem is that your colx variable never resets. So every frame you are adding to the colx value. You can reset colx to 0 after your loop to fix the problem.
Do you frequently have great ideas but immediately lose them? Check out the MVP for my website called IdeaVault. It is designed to solve that problem. Desktop browsers only currently.

User avatar
raidho36
Party member
Posts: 1953
Joined: Mon Jun 17, 2013 12:00 pm

Re: Assigning an image to consecutive tables using 'for loop'

Post by raidho36 » Wed Aug 28, 2019 2:01 am

If you're new to programming, I suggest you use flowcharts for programming on paper first, and then Lua for programming in computer second. Experienced programmers can skip the flowchart part for simple programs because they just create and hold it in their heads. Once you have a working flowchart, making a program out of it is easy. There are multiple problems with your code and basically they all have to do with not using a flowchart, not thinking through every last bit of the program in beforehand, so the program logic is broken.

The reason you're having a single column is because you draw all 5 of them in (nearly) the same coordinates. The reason it's moving is because you increment your X coordinate every iteration, and you never reset it.

Post Reply

Who is online

Users browsing this forum: Bing [Bot], raidho36 and 7 guests