Week Four - Projects!

Welcome back! This is going up within a few hours of Week Three (hopefully), so scroll down and read that first!

Okay! Now that you are caught up, we can begin! Our assignment for the weekend was to figure out what we were going to do for our first projects. I had a few ideas - I really wanted to make a point-and-click adventure game - but nothing too concrete. I ran the idea of a game by my partner, Isaac, though, and he thought it sounded cool, so we were set on that, although we still needed a storyline.

As a bit of a preface, we'd seen a few of the projects that the previous WDI class had done, and I think that impacted our class quite a bit. For some people, I think that they saw "Oh wow, that team made this awesome mapping app! I want to do that too!" For Isaac, he thought "That is a lot of hipster apps. I want to make a non-hipster app." For me, I just wanted to make a game ^^; I was actually a bit disappointed to be working with a partner, since I was worried it'd mean I wouldn't be able to make my adventure game, but luckily Isaac is awesome, and went along with my ridiculousness.

Monday

We did a bit of Rails review, and went over how to get Rails to work its magic, then had a CSS review lesson, since it had been a few weeks since we'd really done anything with CSS. If you don't remember, CSS is basically how you make websites "pretty".

In the afternoon, Isaac and I discussed our game some more, and decided that since we were going to be making all of the art ourselves, and neither of us was particularly skilled, we should make a children's game. Actually, I should first back up a bit, and explain. So, I already mentioned that we were going to make a point-and-click adventure, right? But you might not know what that means! Essentially, the user is presented with a first-person view of a static room, and they click on various items and characters in the room to interact with them. So you might click on a door and get a message like "The door is locked..." But that's the only door! How can you proceed in the game! Maybe you click on the desk next, and find a key. Then you can click on the door again, and use the key to unlock it. Simple enough, right? This style of game seemed best-suited to our abilities, since it doesn't need AI, animated graphics, hit detection, or anything super complicated, and changing rooms can be done through a web link. So, we knew we wanted to make a children's adventure game - what was the next step? Well, adventure games are often mysteries, filled with puzzles, and are fairly story-driven. Our brilliant storyline was as follows:

Today is your birthday, and your best friend has baked you a wonderful birthday cake! Isn't she the best? But wait! The cake has vanished! Who could have stolen it! And thus the search for the missing cake begins...

It isn't Shakespeare, but I think that is a reasonable plot for a kid's story! As for the characters, I decided to use some characters that I'd initially created with a friend, back when I was living in Japan. Meet Nasu-kun (he is an eggplant):

And his friend Tomato-chan:

Isaac and I spent most of the day fleshing out the story, and had (what we thought was) a pretty good idea of how we wanted our game to be set up code-wise. Isaac was worried the game would be a bit too simple, so we decided to add in some trivia questions that we'd randomly generate from content that we scraped off of Wikipedia or some similar website. An example would be a bird that asks you geography questions (because birds fly around and are thus quite worldly!), which you'll need to answer correctly before he'll give you a hint on how to proceed. Another character was a lazy housecat that slept all day, and would ask you movie trivia questions (that we would get from IMDB) before helping you in your quest to reclaim your stolen cake. Considering it's your birthday, these characters are kind of jerks, actually!

Tuesday

Today we covered validation, and adding "admin" privileges to users. Previously, anyone could add/edit/delete items on our websites, but this would make it so that only specified users would be able to d that. We also covered SCSS, which is another way of writing CSS, but gives you a bit more functionality. Finally, we covered Foundation, which is a set of premade styling code similar to Twitter Bootstrap, but a bit less overbearing (it can be hard to get Bootstrap to do things it doesn't want to).

In the afternoon, Isaac and I started drawing our characters (it is possible this was actually done on Monday and I'm remembering wrong, but whatever) and rooms out. We used a free drawing program called Inkscape - I've only ever made things with MSPaint, so learning how to use Inkscape was a bit frustrating, but once I got the hang of it, it was actually great, since it let me copy, layer, and rotate images, which was basically exactly what I needed. We were going to have a background, and then place all of the room's items on top of the background, and each item would be a clickable object. If they were all one image, this would have been a lot harder to do. Amusingly, lots of my classmates saw us working and were like "Oh wow! Your project looks great!", but we hadn't coded a single line at that point. I went home and created the first room (the kitchen), an additional character (a mushroom), and wrote out most of the script for our game, while Isaac got to work on creating a way to log in to our game via Facebook.

Wednesday

We had a talk in the morning about the importance of collaboration in coding. Previously, I guess it was pretty common for companies to want to hire these awesome coders that could just sit down and power out a project all on their own, but increasingly people that can work well in teams, even if they're a bit less skilled, have become more popular. So, it is important to be able to work with partners, which was why we were doing pair projects rather than independent ones. While I think I'd have preferred an independent project, just as a way to reinforce what I'd learned (rather than being able to ask a partner when I was stuck), Isaac was a great person to work with, and I can appreciate our teachers wanting to get us comfortable with working in groups.

The main activity for the day was a debugging exercise that I actually really appreciated. We were given a program with tons of errors, and we had to fix them all. It helped us grow more familiar with debugging common errors, and for me at least, went a long way in helping me figure out where Rails put different folders, how to navigate them all, and how everything worked together. Since the previous week had been a bit more abstract, this really helped to give a lot of those themes a more concrete form.

In the afternoon, Isaac and I set up our database tables and started to get the first room set up. Honestly, I don't remember too much of what happened today, but I'm fairly certain I had the room set up by the end of the day, and the ability to click on items and get messages to display. I could be jumping ahead by a day, though.

Thursday

I don't remember what happened in class at all today. I am fairly certain that by the time I went to sleep, I definitely had the layout of the first room set up, along with the ability to click on items, and that the text window displayed in the proper place (something that I had an abnormally difficult time doing because I am not so great with CSS. I basically had to change one word, but I couldn't figure out which one it was...)

Friday, Saturday, Sunday

All three of these days were focused on getting the first room up and running (spoiler: our game was not completed). I found a neat video game font on Google Fonts that I added to the game, and made it so that when a text window was open, you couldn't click on any other items until you had closed the first window, preventing people from opening multiple windows at one time (and also how all of the games I've played have always worked). I also wrote a small function that would read in a text file of all of the dialogue and assign it to the proper characters. Around this time I realized that I needed separate tables to keep track of conversations and the individual lines of dialogue, so I had to add all of that in, and set up all of those relationships too. Eventually, I managed to get character dialogue to display in boxes identical to the item boxes, and to have a picture of the character speaking appear on screen at the same time. This probably all sounds really easy (and I'm sure it is), but MAN! That was super hard! Also, this was all in JavaScript, which we'd barely covered up to this point in class. Fortunately, my friend Erek was around to give me tips on what I needed to do. One conversation went something like this:

Erek: Tell me in English exactly what you're trying to do.

Me: I want the character image associated with the line of dialogue to appear behind the text box, and go away when you click to move to the next line of dialogue, and be replaced by the next character.

Erek: Okay, now write that.

Me: *writes*

Erek: Okay, that's completely wrong. But you have the idea, at least. Read this documentation and figure out how to write it correctly now.

It took a while, but eventually I got there! Finally, late Sunday night, I had a mostly-working room! As this was going on, Isaac had created the second room, and had written the code so that each person would be able to start a brand new game. Without this code, any changes I made in my game would also be apparent in your game, and that can't happen! He also got it (mostly) working on Heroku, an online hosting site, but it still isn't displaying some stuff properly yet, so no link for you guys, sorry. Unfortunately, we weren't able to get the link from one room to the next working either, so despite having two different rooms, we could only get there by typing in the URL. Around 3AM I tried merging my code with Isaac's, and got a bunch of errors, and decided to just call it quits, since I hadn't slept much the last few days.

Monday

I'm going to group Monday of Week Five together with Week Four, since it was presentation day. I managed to get all of the merging conflicts cleaned up before class, so we decided to present using my computer. We were actually racing to add a few things and clean up some code in between presentations, so while people were setting up, Isaac and I would flip our laptops open and frantically start coding again.

My classmates had some pretty neat apps - there was one that located and rated nearby public bathrooms, a social networking site that was viewable on iPhones (and Androids, to an extent), and a reading/dictionary website that would highlight key vocabulary words and display the definition when clicked on. These are all more complicated than my brief summaries, and there were of course plenty of other projects that I'm not listing off right now, but that were still neat.

Isaac and I presented towards the end of the day, and I think that everyone was super exhausted, so even though people had neat projects, they were a bit tired while presenting them, and so I wanted to channel a ton of energy into our presentation and wake everyone up. Also I was just super excited to tell everyone about our sweet game. We started with a brief discussion of what our project was, and where we wanted to go with it, despite not coming anywhere close to finishing it (it was a typical E3 demo, basically). Then we ran through how our databases were constructed, and how the rooms were set up, and then we quickly demoed the game. I read the "Oh no! Your cake has been stolen!" conversation in an overly dramatic way, which I think the class got a kick out of, and everyone loved the art (of course :P). Then we talked about how we got the text boxes to work and I walked the class through the code in what was hopefully an easy-to-follow manner. Considering how much trouble I had setting them up and making them work, explaining it after-the-fact actually was really easy, and made complete sense! As we were going back to our seats, people still had lots of questions for us (mostly about how cute the graphics were... ^^;). All in all, it felt like everyone really liked our game and presentation, which was awesome. It was really different from a typical Rails app, and honestly we probably didn't even need to use Rails, since it made a ton of extra stuff that we didn't even touch, but I had a great time making it, and I learned a lot. After everyone presented, we had pizza and then demoed our projects to the new June Web Dev class. I am not sure when Isaac and I will get a chance to go back to our game, but I know we both want to finish it. That birthday cake still needs finding!