I’m proud to say that I’m finally making measurable progress on my game. This past week I coded many of the game’s essential features and started picking up speed.
I’ve also become aware of how long this game might take, and how little time I have left before school starts.
You know how I said I was going to work on deploying a simple app this week? Well, I lied. At one point I tried picking up that project, but then it became too complicated and I left it.
This week was very structured compared to my first month here. Each task I worked on corresponded to one day of the week. None of the projects were too complex, but they were the basic foundation for the aspects of my game and very important.
On Monday I worked on figuring out how to drag objects using the player’s finger. In my previous experience on Khan Academy with ProcessingJS, there was a feature in the code called “mouseIsPressed” that registered the position of the user’s mouse wherever it was on the screen. However, you could not call the position of the user’s mouse in Lua with that phrase.
Instead, the only way you could register the mouse position in Lua was adding a touch event. For any object on the screen, you could add a object:touch(event) function that would register whenever the user touched the screen. This function could discern between when the user first puts their finger on the screen, when they move their finger across the screen, and when they lift their finger from the screen, allowing you to trigger different actions with a variety of movements.
Even with this knowledge, I was still having a hard time grasping how I would use this concept to move objects around following the player’s finger. However, I got lucky and found the exact code I was looking for in one of the Marmalade forums(view it here). I was able to incorporate this code into my own game with some tweaking and used it to move around colored rectangles. These colored rectangles will the be the nori, fish, and vegetables that will be in the final version of the game.
I must confess, the simple act of being able to move a rectangle around the screen with my mouse made me extremely happy. It sounds so simple, but there’s just a great feeling that comes with watching your own efforts come to life and work.
Tuesday I worked on making this function more tailored to my game. In the game, you’d have to move one ingredient of the sushi to the middle of the screen, then add another on top, then another next to it, and so on. The ingredients needed to be placed in a certain area, the bamboo rolling mat or makisu, and stay put, otherwise they need to return to their original position.
To set this up, I created a box in the middle of the screen to represent the bamboo mat and a rectangle on the side of the screen to represent an ingredient. My goal was to drag the ingredient into the middle box. If it was dropped within the box’s boundaries, the ingredient would automatically center itself and “plop” there permanently. If dropped anywhere outside the box, the ingredient would automatically return to it’s original position and still allow the user to move it again until dropped in the correct spot.
For a while, I tried seeing what functions Lua had that checked whether a point was inside something else. I thought I found what I was looking for in a function “node:isPointInside”. I spent a long time trying to figure out how to use the function and the even harder task of manipulating it to respond to the mouse, to no avail. Frustrated, I asked my father for help. His answer opened my eyes and made the entire process of coding from there on out much easier: Make your own function. Instead of trying to take tools that you don’t understand how to use and don’t completely work for what you’re building, invent your own customized tools. I could create my own functions. They might only work for my specific game, but that is a good thing in reality. A game uses many of the same functions over and over again with small changes each use, so I would only create a few different functions but be able to use them infinitely more times! If I did need to use a function for a different project at some point, it wouldn’t be too difficult to adapt it because I was already familiar with how it worked.
With that said, I created a function I called “checkPos” that took the x and y positions of where the user lifted their finger from the screen. If the number value was in between the minimum and maximum values of the middle box, then the ingredient would tween to the center of the box. Else, the ingredient would tween back to its original position. Note, this was programmed with an “if/then/else” statement. Coding is the use of logic, which is interesting to see that the same language I used to present the action to you is how I program it for the computer to use.
Now to make the ingredient “plop”. An interesting facet about the touch(event) is that it won’t do anything to the object it’s attached to unless you add an Event Listener. So, without the event listener, you can click the object all you want but it won’t do anything because it can’t “hear” it.
If a tree falls in a forest and no one is around to hear it, does it still make a sound?
Not in this case. So at the initial start of the function, I had added an event listener to the ingredient object. In order to make the object plop once dropped in the middle box, the command to remove the event listener was added into the actions if the ingredient was dropped in the middle box. Once it was dropped in the box and centered, the ingredient would no longer respond at all to the user’s touches. This way, if the ingredient was dropped outside the box and returned to the original position, you could still move it until it ended up in the right spot.
I spent most of Wednesday polishing up the code I had so far. All the functions I used had to be made as efficient as possible. For example, to remove an event listener for a certain object, you had to enter the name of the object twice. This meant that every time I wanted to use the function on an object, I’d have to type the entire thing again changing only the name of the object twice. A programmer’s goal is to create the cleanest, most efficient code with as little lines of code as possible.
In order to condense this process, I made the checkPos function take in the parameter “name”. Whenever I called the checkPos function for a specific object, I would pass the name of the object into the function: “checkPos(name)”. The checkPos function would take the name I passed and substitute it into the remove event listener function. I also gave it the parameters for x and y coordinates to center and x and y coordinates to return to.
I made small adjustments like this throughout the code, building a strong base to build my game off of to make coding later much faster.
My next step was to make a painting function. In the game, the user would have to spread rice over the sheet of nori and drizzle various sauces onto the roll. The function I create would have to draw an object—I used a circle for now— wherever the player pressed and moved their finger. It would also be restricted into a certain area, on the nori and leaving a gap at the top (important in the actual rolling of maki sushi).
I tried looking for a code tutorial on the Marmalade forum, hoping to get lucky like I did with the drag objects tutorial. No luck.
However, by this time, I was familiar enough with the touch(event) function that it didn’t take me too long to figure out how to code this myself. First, I created a transparent rectangle in the middle of the screen. This would be the area that the painting was restricted to. Then, I made the area respond to the user’s touch, drawing a circle at the coordinates of the mouse whenever the area was clicked or moved over.
Also, I created a rectangle on the side of the screen that the user had to click first before they could paint. This would be parallel to selecting the rice cup before you could spread it over the nori. Originally I had used a circle to represent the rice cup, but I found that the circle object in Marmalade responded weirdly to touch. It only registered touch in a square with a side length equal to the radius of the circle in the bottom left of the circle. The entire circle did not respond to touch, just the region within that square. The area outside of the depicted circle that was within the square did receive the touch. I couldn’t find any explanation on Marmalade or Lua forums as to why this happens, and I didn’t find anyone else who experienced the same problem. So still not sure how to fix that, but it doesn’t matter too much for me as I will be using sprite objects in the final game anyway. (If you happen to know why the circle object acts this way, please leave a comment below.)
On Friday I explored with sprites. Sprites are images that you can pull to work within the game. Eventually, once we have the art for Master Sushi Cat, we’ll be able to bring in the designed ingredients for our game rather than just using colored rectangles. I wanted to try out some basic images within the code I’d already programmed to make sure my functions would still work.
To test this I downloaded a random square smiley face picture from the internet and loaded it into the program, substituting it into all my functions. It worked in all the functions. A short, simple project, I ended my Friday with no obstacles.
While I made a lot of progress this week, it took a considerably long time compared to how much summer I have left. And it’s only a tiny bit of what I still have to code. I’m hoping that once I get the foundations set, my game will go much quicker. I can only expect so much, though.
Sorry for such a long post. Lots of information this week!