The GUI, levels, and the word 'iterate'

Well, these last few weeks have been pretty eventful for myself, but unfortunately not as much for the game as I’d have liked it to have been.  I think I mentioned in my last blog post that the GUI for the game was nearly complete, and if I didn’t, the GUI is nearly complete. (And by nearly, I mean not at all.  :D)
 
We ended up deciding to separate the frame of the window from the background itself in the drawing process. That way we could mix and match frames and backgrounds without having to create entirely new images! I taught myself one or two things that I probably could have just looked up, but oh well. I decided to handle the drawing of buttons by letting them handle their own drawing, but based on a parent element, like the window itself. The top left corner of a window is the origin, and the coordinates that you hand any window element that goes inside of a window are based on that origin.
 
And since Impact handles the drawing of images from a sprite sheet by cell numbers going from left to right, top to bottom, instead of row x column, I had to figure out how to get the cell number of each cell that I wanted to paint on the canvas programmatically.  What it basically came down to is multiplying the number of columns times the number of rows, and then adding the column number of the cell you want.  So, if you have a 2D array, and it’s C columns across, and the cell you want is at row r and column c, then you’d get the number of the cell (indexed at 0) by C * r + c.  So if I had an array that was 4x4, and I wanted to get the top left corner [which is (0,0)], I’d use 4 * 0 + 0 = 0.  The top right corner, which is (0,4), would be 4 * 0 + 3 = 3. Remember, it’s 3 because arrays are indexed at 0. Last example, if I wanted to get the number of the cell at (2, 3), it would be 4 * 3 + 2 = 14. I know it’s nothing fancy and I figured it out in about five minutes, but, you know.  But, it’s still nice to know.  :)
 
Handling the drawing in terms of a 2D array helped me iterate through the drawing of the window based on the width and height that you give it. I used a nested loop, the first loop iterating through the height, and the second iterating through the width. The loops increment themselves based on the cell size that you passed to the “GUI Master” (the cells are always squares, for simplicity’s sake), and from the index in the loop, it determines which cell it’s currently drawing. 
 
I should talk about the templates a little. The templates themselves don’t have to be squares, but the template for the border must be an even number of cells across and down. The background template can be whatever you want, just as long as you’re not sticking half of a cell in it. The border template is a little different because it needs to have a "filler" cell to draw when the window is larger than the template. Those "filler" cells are the inside corners of the template. It’s assumed that the creator of the window isn’t going to want it to be smaller than the template, so it won’t be a problem.  If the creator does want the window to be smaller than the template, then there are other problems.
 
So the loops iterate along going cell by cell, and they draw from left to right, top to bottom. They’ll start with the template, and basically draw it up to the halfway point, then draw the filler cell until they’re the-rest-of-the-template’s-cells away, and then continue drawing the template. So if the template is 4 cells wide, but the window is 10 cells wide, it’ll draw 2 cells, then the filler cell 6 times, and then the last two cells. Then for the background it just basically grabs the cell size of the border, multiplies it by 2, subtracts it from the height and width, and then draws the background cells based on that, tiling the background image. Boom! There’s a window when all is said and done! I stuck some buttons on the window, wrote some code to check whether the buttons were being clicked, and then the game loads a level. Here’s a screenshot: (insert levelselect.png)
 
That’s pretty much it! I have to work on some other things along with the game at the moment, but the next couple of things I want to tackle for the game are animated background tiles (which is already implemented in Impact), platforms, ladders, and checking enemy logic. After I get those things done, we can make a decent first level that might be fun! With a spider! Maybe two!

Currently Working On

Currently, we're working on the first chapter of our 'Deceit' action platformer! As well, we're working on a Kickstarter to help us shift our focus from SAP Business One training to game design!

Read more

Current Projects

Location

US
17285 Sw Arborcrest Way
Beaverton, OR 97006
Email
info@tiger-sheep.com

Get in touch

Give us a call at503-427-8177

Email us at

currentprogress460.png