Important to note this code is completely independent from the grid lines drawn individually near the top. I’d get rid of those lines, and just add a stroke (border) to the grid rectangles. A good example of a tutorial trying to make things easier to understand but teaching bad coding practices…
I appreciate this and it is helpful to know some of the math. I still don’t see anywhere how to change the grid from a 3x3 to a 5x5. I have searched through everything I can find. What am I missing?
The 3x3 grid is created in that code (apart from the fairly pointless grid lines created near the top - they are just cosmetic).
The math explains how the 9 squares are allocated to either column 0, 1 or 2, and row 0, 1 or 2. So you need to adjust the math so that they are allocated to a column between 0-4 and row 0-4, and adjust the x/y positioning to take into account a bigger number of smaller squares.
XeduR gave you a clue on that in his post.
I agree with nick’s point in that you should perhaps go through a few general lua tutorials to get a bit more familiar with the language itself. You could also have a look at these tutorials: https://docs.coronalabs.com/tutorial/ to better understand some basic things in Corona.
The most important thing about tutorials is to understand what is actually being done and why. After you’ve practiced a bit, you should be able to solve your problem with relative ease.
You don’t need to read and watch every tutorial, but no one tutorial can teach you everything.
As mentioned above the grid lines were done specifically to create a 3x3 style tic-tac-toe board. If you’re making BINGO, you probably wouldn’t use this kind of UI design, but likely have some background graphic designed in a tool like Photoshop that you load on the screen.
Next, for positioning the numbers, there is a key line that got pointed out earlier that you mentioned:
spots[i].x = ( i - 1 ) % 3 \* 100 + 60
You are going to loop over 25 spots in your 5x5 grid. That line of code positions on a 3x3 grid. The loop uses “i” as an index variable of the for loop to count from 1 to 25. It then takes ( i - 1 ) and does a modulus operator (gets the remainder of a divide). So basically if i = 1, then 0 % 3 will be 0. Multiply that by 100 and you get 0. Then add 60 and you get 60. The first spot will be drawn at X = 60.
Now the next time through the loop, i is 2. ( i - 1 ) % 3 which will produce a value of 1. Now 1 * 100 + 60 will make X = 160. The third time through ( 3 - 1 ) % 3 = 2, 2 * 100 + 60 will make X = 260. The results are three spots at 60, 160 and 260, evenly spacing them across the screen.
As the loop continues, the results of using “% 3” will result in values of either 0, 1 or 2 so for each future row (there was something that adds a value to the Y calculation to move the next row of numbers down the screen. If you change the (% 3) to (% 5), then you will get 5 numbers across, but they will be X values of 60, 160, 260, 360 and 460, with the last two being off screen since your config.lua is likely creating a content area that’s 320 points wide. You would need to change the value for how much to move based on 5 wide. Perhaps
spots[i].x = ( i - 1 ) % 3 \* 65 + 35
That would give you 35, 100, 165, 230, 295
But this is all a moot point because that’s not how BINGO works. If you number the spots, you would end up with:
1 2 3 4 5 6 7 9 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
BINGO numbers are more like:
1 16 31 46 66 3 17 32 48 68 7 20 FS 42 70 10 24 40 60 71 15 30 45 65 75
So numbers count up and down a column before moving to the next column over. Compounding matters is that the numbers are not computed in order, but are random numbers. Column 1 being 1 - 15, column 2 being 16 to 30, column 3 being 31 to 45, etc. So the positioning logic of simply counting from 1 to 25 isn’t really going to work for you anyway.
The logic for a BINGO board is something more like:
local B = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 } local I = { 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 } local N = { 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45 } local G = { 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58 ,59, 60 } local O = { 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75 } math.randomseed( os.time() ) -- Seed the pseudo-random number generator local function shuffleTable( t ) if ( type(t) ~= "table" ) then print( "WARNING: shuffleTable() function expects a table" ) return false end local j for i = #t, 2, -1 do j = math.random( i ) t[i], t[j] = t[j], t[i] end return t end shuffleTable( B ) shuffleTable( I ) shuffleTable( N ) shuffleTable( G ) shuffleTable( O )
Now you have 5 tables that have been randomly sorted. Now to draw, those numbers on the screen:
local B\_spots = {} local I\_spots = {} local N\_spots = {} local G\_spots = {} local O\_spots = {}
for i = 1, 5 do B\_spots[i] = display.newText( B[i], 35, i \* 35, native.systemFontBold, 28 ) I\_spots[i] = display.newText( I[i], 100, i \* 35, native.systemFontBold, 28 ) N\_spots[i] = display.newText( N[i], 165, i \* 35, native.systemFontBold, 28 ) G\_spots[i] = display.newText( G[i], 230, i \* 35, native.systemFontBold, 28 ) O\_spots[i] = display.newText( O[i], 295, i \* 35, native.systemFontBold, 28 ) end N\_spots[3].text = "Free"
So just because Tic-Tac-Toe is a grid game, doesn’t mean that code is useful for other grid games.
And of course, the rest of the Tic-Tac-Toe game logic isn’t practical at all for BINGO. Finally, there are many different ways to accomplish this. I’m sure other developers would come up with a different way of managing displaying a BINGO board.
Rob
Thank you so much. Your help is very much appreciated. I will play with this and learn. Thanks again
Thanks again for your help. I am taking this one step at a time. My first step is to get a grid of squares on the screen (without the grid). I have played around with the code,
<
local spots = {}
for i = 1, 25 do
spots[i] = display.newRect( 0, 0, 50, 50)
spots[i]:setFillColor( 1, 1, 1, 0.2)
spots[i].x = ( i - 1 ) % 5 * 60 + 40
spots[i].moveType = nil
end
>
I get a single row at the top of the app of 5 squares across. I don’t know how to get all 25 to appear. I have changed the 60+40 to many different things but that only moves the squares horizontally, not vertically. How do I get this to move down the screen.
Sorry for the annoyance. I am trying everything I know before I write.
You are missing the line that sets the ‘y’ position, i.e. where the square is positioned from top to bottom.
This is still screaming ‘go back to basics’. Then you would easily spot that you never set a ‘y’ position and therefore they all stack on top of each other at the default y position of 0.
I had never “set” a “Y” position. I am using the code you provided with your tutorials and in this forum. I am not inventing my own. I obviously don’t know the code for this. I can’t find it on any of your help pages. I understand that I am trying to move this down the “y” position. I have gone through your pages for Corona and I can’t find any code that makes sense to move this. Each time I send a message you are very happy to tell me that I have no clue as to what I am doing. I already understand that. I am looking for where I can find this or how to do this. Simply telling me that I don’t know the answer once again isn’t helping. Is there some reason that you do not want to help? I don’t mean to be bothering you. I am just looking for guidance. If there is a tutorial that you know of, please which is it? I have gone through the basics. I have built the balloon, the tic tac toe. If in this and others I have searched for I am missing it. Could you please give me a clue. And better yet, if you are trying to help could you give me an answer? You are under no obligation to help me. I apologize for the intrusion. I thought that is what forums were for.
Mate, the code is on this thread about 3 or 4 times, including my post where I explained each line in detail. You’ve removed it from your code for some reason.
I could just point you at the exact line, but if you read through this thread again you should be able to figure it out. Not through any coding knowledge at all, just literally playing ‘spot the difference’.
You’ve had valuable advice from various professionals who remember what it was like to know nothing, and that is to build towards a game like this, not leap right in.
I’m currently learning .NET for work, and I’ve had to go right back to basics. How to set up Visual Studio & SQL server, how to download plugins, how to print text to the screen. I’m not trying to build Facebook, or even a calculator app, on day one. I might be able to learn faster through my knowledge of C# and game development, but I still have to start from scratch.
When I was learning Unity I coded along with a tutorial series for over 75 hours, making sure I understood every single line of code and editor function used, re-watching several times if necessary. It made absolutely no sense at first coming from Corona, but it eventually clicked and now is second nature.
Hi @mark036, the thing is you had this code in your original post at the top:
for i = 1, 25 do
spots[i] = display.newRect( 0, 0, 60, 60)
spots[i]:setFillColor( 1, 0, 0,0.4 )
spots[i].x = ( i - 1 ) % 5* 100+ 60
spots[i].y = math.floor( ( i - 1 ) / 5 ) * 100 + 140
spots[i].moveText = display.newText( " ", spots[i].x, spots[i].y, native.systemFontBold, 80)
spots[i].moveType = nil
spots[i]:addEventListener( “touch”, handleMove )
end
I’m not going to format the code because I want to really highlight the one line of the code.
One thing I did not cover well in the original tic-tac-toe tutorial or in my response last night is where do these numbers come from. Let’s start with the width.
Assuming you have a content area of 320 points wide (which the Tic-Tac-Toe tutorial uses) and you want three equal spaces across the screen, you would divide 320 / 3 and come up with 106.66667 points per spot available. But you want some padding between spots, There are four areas of padding in a 3 wide grid (left, right and in between the three spots) 20 points / 4 would be 5 points of padding for each spot. That’s a convenient amount and it leaves 300 points for three spots, which is 100 points each. This is where the 100 came from.
Then the height of the text filling the spots was set to 80. That leaves 10 points of padding above and below (and around) each number so the number doesn’t fully fill each square. Since a Tic-Tac-Toe board’s spots are square, then the height of each row would need to be 100 also. Each new row needs to be 100 + padding + an offset to account for UI chrome like the title of the game and move each row lower on the screen.
If you’re going to use 5 instead of 3, you have to change the assumptions for everything.
320 / 5 = 64
But that would pack each spot exactly beside each other. You may want some padding, so making each spot 60x60 with 4 points of padding should work for you. But your “bingo background” may end up with more padding needed between spaces. This would change your computations for the Y axis too.
spots[i].y = math.floor( ( i - 1 ) / 5 ) * 60 + ( i - 1 ) * 4 + 140
I tweaked this a bit more, so now you’re using 60 points for the size of the spot, applying 4 points of padding and offsetting it 140 points from the top.
Rob
Thank you for your help. I do appreciate it. I am sorry for getting frustrated. I looked into your help pages on how to change the color of the text. I found, <
local myText = display.newText( “hello”, 0, 0, native.systemFontBold, 12 )
myText:setFillColor( 1, 0.2, 0.2 )>
I tried to put the <
myText:setFillColor( 1, 0.2, 0.2 )> In several spots to make the B,I,N,G,O black instead of white. It keeps giving me an error that I can’t set it to “nil”
The issue there is that your code doesn’t contain a myText variable.
That is the variable used in the example, but you need to adapt it to work with the spots[i].moveText variable.
Again, this is basic stuff that there is no shame in not knowing, but it’s stuff you would have learnt if you followed all the introductory tutorials posted by others above. You can’t build a table without knowing how to cut wood, and you can’t build a game without knowing what variables are.
I am trying to figure this out. I have found the information I just don’t know how to incorporate it with this specific code.
I understand it’s frustrating that I won’t just give the answer. Think of it as tough love, I want to help you think like a programmer. The clues I’m giving aren’t hitting home because the very foundations of lua coding, or even coding in general, aren’t there. We all had to go through the tutorials and example code, there are no shortcuts.
Rob may kindly come along with the exact code you need in a minute, but I’m not convinced that helps long term if you just plug it in and move onto the next problem.
Just for fun, here is a basic bingo game written for Corona using SSK2.
Time to write ~1 hour
Lines of code including blanks and comments: 225
Code: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/09/bingo.zip
Game in action:
https://www.youtube.com/watch?v=unBusx-duMw
It should be easy to understand, but be aware I made use of plenty of SSK 2 features and some advanced coding because I’m just too lazy to make a beginners version.
PS - I agree w/ the idea that you should code this on your own. Now, you have the wonderful docs and examples on the site plus this working ‘example’ to refer to for the logic of layout and checking for a win.
I suggest you now write your own version of the game to see if you can based on all this. In doing so, you will learn many things and hit many roadblocks.
Have fun and good luck.
PPS - This is about my whole week’s time for help so I won’t be answering any ‘how do I X’ questions as related to the example. Anyways, I think you’ve got enough now to get rolling.
Unfortunately, I can’t write your project for you. Like Nick, I want to see you succeed, but you can’t if you have someone do all the work for you. If you want a BINGO game but don’t want to put in the work, or perhaps you want to do the graphical side and need help with programming, you could go to our Jobs board and hire a Corona developer to provide you the code side to your art.
But the presumption here is when you ask programming questions, you’re wanting to be the programmer on the project and there are certain expectations and learning programming basics is one of those.
You can’t take code snippets from multiple programmers and expect them to work together. In particular, taking example code from the documentation is notorious for demonstrating this.
Code in documentation samples have no clue how you will use it. Almost no one will have a text object name “myText”? Why? because it has no meaning / relevance to your project. In BINGO for instance, you’re going to have multiple text items. Each number is a text object. You may have a title object. You may have some instruction text. None of these uses of text makes sense to name “myText”. But when writing documentation, you have to write it in a very generic “I don’t know how you will use it” situation. There “myText” is probably as good of a variable name as any. I guess “someTextLableYouWillRenameLaterBasedOnYourUsage” might be more appropriate, but that would just look totally ugly in the docs.
In other words, the documentation code samples are not designed to be 100% copy/paste. There is an assumption you will adapt it to your specific needs making your own decisions.
Rob
Perhaps I should explain this project to you.
I work with a non-profit television channel. I am not paid for my services. I wanted to produce a local Bingo program. Rather than giving out cards I wanted to create an app. I wanted this app to do a few basic things.
-
Create a random set of Bingo numbers. (Thank you for that)
-
Allow the player to select the numbers and when they have a row across have a bingo button appear that they could push and would take a screen shot of their numbers (if possible) and send a message to us that they had gotten the Bingo with contact info so we could call them.
-
Be able to display the live stream that we have to our website. If possible to have it be audio or video or neither if they are watching it live.
I have had to learn all kinds of different systems over the years. My goal isn’t to start a game making business it is just to produce this one simple function. The station has no budget and I didn’t want to hire it out so I volunteered to do it. I know this isn’t your problem and perhaps I have gotten in over my head.
From the information I see online and what you have given me I can see this is absolutely possible. I have from other tutorials figured out how to put backgrounds in. I have the page working with the squares and the numbers thanks to you. I am now trying to incorporate the information with the tic tac toe game on how to make the select the squares and have it pronounce a winner. I would also like, if possible to change the font color. I haven’t been able to figure these out. Once again, I know that I could figure out how to do this if I would only commit to days, weeks, months or research. I don’t have that much time. If I am spending a weekend in Mexico I don’t want to have to major in Spanish in college for 4 years to do so. The web pages say there is help in the forums. If I can’t get help I will have to abandon this and try something else.
As you have seen, programming is not easy. If you don’t have the sort of time required, the app you’re describing is not realistic at all.
It might seem like a ‘simple function’, but I would venture there’s years of experience required to produce that design in the timeframe you’re talking about, and have it good enough to release into the wild to your viewers. RG makes it look easy with his example, but there’s a LOT of hard work to get to that level.
There is help in the forums, but the help you need is to basically code the app from start to finish - or teach you how to code it from start to finish.
Hi again. It just occurred to me that I may have the win checking code slightly wrong. You should not check the rows, just columns and diagonals.
I haven’t played Bingo and over 20 years and I was thinking more about tic-tac-toe as I wrote that bit of code.