At repl.it, we recently hosted a game jam with a grand prize of 1BTC, generously provided by Satoshi's Treasure! Learn more about the jam (and our winners) here.
We (virtually) sat down with our winners ggzor and MarisolH to talk about their coding background, what they plan to do with the 1BTC, and of course, their game, SceneMachine.
Katya: First of all, congratulations! The team here at repl.it and our judges loved your game, SceneMachine.
ggzor: Hi! I'm just shocked! :O It's incredible! I didn't think we could win the Game Jam, it's just... I'm really shocked. Thank you a lot!
Katya: We know your usernames, and we know your game. Who’s behind @ggzor and @MarisolH?
ggzor: I’m Axel. I’m 19 yars old and I study computer science in Puebla, Mexico. I’m a young programmer who loves to code—I’m really passionate about functional programming. My teammate, Marisol, is also 19 and studying CS in Puebla. She is more passionate about design and cats.
Katya: How did you hear about the game jam?
ggzor: I saw the game jam badge while I was working on a repl. I didn’t immediately go to the blog, but I was curious about it… After I finally read it, I started thinking about what to do.
Katya: Had you ever made a game before?
ggzor: The only game I made before was a little private project. I never finished it, but I plan to finish it soon.
Katya: How did the idea for SceneMachine come about? What's the story behind the game?
ggzor: Well, the SceneMachine was an idea I had right after reading the Game Jam post. I am really excited about reactive programming (RxJS), so I wanted to make a game about it.
I really love how stream operators mix and match, so I first thought of replicating operators in the game. The original idea was to make a "pipes" game, but then, I was watching some videos from “The Coding Train” and how he used the Matter.js library to make awesome stuff (he was creating an Angry Birds replica), so I got inspired to create something similar, but with additional "elements" which were intended to work as the RxJS operators.
It was a little bit hard to me to think how to create the game mechanics without pipes, because some basic RxJS operators are all about pipes (streams). Additionally, the physics add another dimension to the game, so I discarded the idea of replicating the operators. But the idea of composing elements to complete objectives (there was no story at this point), was just incredible for me.
Here the name "SceneMachine" was born. You put elements into the scene to create your own machine.
Katya: How long did it take you to design? What was your work process like?
ggzor: It wasn’t completely planned.
I began playing with the Matter.js physics library and the SVG.js library, and I was trying to make them work well together. Then, I found that Matter.js had a SVG parser, so I started designing a quick level with Inkscape. After designing a simple level, I tried to display it on the screen and make it work with Matter.js.
It took me a complete day to make it work, but when it was done, I realized the potential of designing the levels with an SVG tool, and then loading them into the game. After getting level loading to work, I realized that I would need a game scene camera. So I started programming the camera, but I wanted to do it with RxJS. It was painful. I had not used RxJS for this kind of stuff before, so I fell into the many pitfalls of reactive programming. It took me four days to get it working properly.
Fortunately, I eventually got it working, I learned a lot and I got enormous flexibility from the implementation (I didn't take full advantage of all the features the implementation gave me, as automatic positioning, zoom and object tracking).
Now, I had to manage game state. How to do it? RxJS. Result: still painful.
It took me another three days to try making RxJS handle the game state, but this time, I failed. By this time, I was already working on the UI, so, when I tried to join the state management and UI, they didn't work. So I changed my approach, and let the UI code guide the game state design.
Finally, this gave me a solid state management implementation (which I didn't have time to refactor). This is what let me implement cool features like the physics engine pausing.
The last two weeks, I worked designing and implementing the elements (with RxJS, of course) and polishing many parts of the game. This time, it was way easier two make RxJS work well, as I got more fluent with RxJS for this kind of stuff.
Finally, the last week was really intensive, I had to work night and day designing and testing the levels. In-game tips were hard to implement.
The reason I used HTML/CSS/Javascript is because it is supported natively by almost any computer. Also, because it's the main technology I've been working at recently and also because it's ease of use.
Katya: What inspired the storyline?
ggzor: The story was inspired by the movie “The Core" (2003). I really liked this movie since I was a child.
Katya: How did you and @MarisolH find one another?
ggzor: I worked with @MarisolH before, making some illustrations with Inkscape for a school project. She is an amazing drawer, so I didn't doubt telling her about the project I was working on. She did amazing work designing the backgrounds, and even designing some levels (level 3, 5 and the two maze levels).
She also helped me test the game, I really appreciate her work. As I have said before, this game wouldn't be possible without her help.
Katya: Do you plan on fleshing the game out, and making it bigger? Any plans for a wider release?
ggzor: Yes! I plan to continue working on this idea. But maybe I will take a different approach to make games. I've learned a lot from this project, I haven't made anything like this before (it impresses myself a lot!). I loved how RxJS let me write clean game state management and user interaction. I think that with more time, I could do something really cool.
Katya: What are you going to do with the 1BTC?
ggzor: Well, we didn't make plans to spend the Bitcoin, but I think we both will get better computers to continue making games.
Top comments (0)