Character selection

How to display different character images in 5*5 arrays and how to make character selection function .Is there any tutorial for the character selection ?

local character= {} for i=1,5 do character[i] = {} for j=1,5 do character[i][j] = display.newRect(j\*55,i\*55,50,50) end end

You would add a touch handler:

character[i][j]:addEventListener(“touch”, someFunctionToHandleTheTouch)

And provide a function to handle the touch.  There are plenty of touch handling examples in our provided SampleCode library.  If you prefer you could do “tap” instead of “touch”.

Rob

How can i display different image like this

m8lMB.png

There could be a lot of moving parts in your example above and a lot of questions.  For instance is the image supposed to be the same for each entry and you’re just drawing text over each one?  Do you intended for all of the buttons to fit on one screen or do you need to be able to scroll around to get to them all?

Rob

I want to make a character list how can i display different image in grid view ?

sampleScreen.png

You have the basic idea in the top post.  Basically you have a loop for each row and inside there you have a loop for each column.  You calculate the X, Y to draw each image based on the index of the two loops and the desired height and width of each image.  Just keep in mind that Lua tables are a 1 based array, not 0 based like many other languages and when you start with 1 and you’re trying to calculate the position, you need to subtract 1 to make the math work.

x = (j - 1) * imageWidth + imageWidth * 0.5

So when j is 1 for the first column, it will compute the center of the block correctly.  After that, assuming you want them touchable, you would add an event listener to handle touches or taps.

Do you know the size of the images?  Do you need to resize the images to make them fit or will they already be the right size?

If you look at the Business Sample App: https://github.com/coronalabs/business-app-sample

One of the pages there is a photo gallery viewer which basically does what you want. 

Rob

You would add a touch handler:

character[i][j]:addEventListener(“touch”, someFunctionToHandleTheTouch)

And provide a function to handle the touch.  There are plenty of touch handling examples in our provided SampleCode library.  If you prefer you could do “tap” instead of “touch”.

Rob

How can i display different image like this

m8lMB.png

There could be a lot of moving parts in your example above and a lot of questions.  For instance is the image supposed to be the same for each entry and you’re just drawing text over each one?  Do you intended for all of the buttons to fit on one screen or do you need to be able to scroll around to get to them all?

Rob

I want to make a character list how can i display different image in grid view ?

sampleScreen.png

You have the basic idea in the top post.  Basically you have a loop for each row and inside there you have a loop for each column.  You calculate the X, Y to draw each image based on the index of the two loops and the desired height and width of each image.  Just keep in mind that Lua tables are a 1 based array, not 0 based like many other languages and when you start with 1 and you’re trying to calculate the position, you need to subtract 1 to make the math work.

x = (j - 1) * imageWidth + imageWidth * 0.5

So when j is 1 for the first column, it will compute the center of the block correctly.  After that, assuming you want them touchable, you would add an event listener to handle touches or taps.

Do you know the size of the images?  Do you need to resize the images to make them fit or will they already be the right size?

If you look at the Business Sample App: https://github.com/coronalabs/business-app-sample

One of the pages there is a photo gallery viewer which basically does what you want. 

Rob