DE Hackathon with Appcelerator

February 11, 2014

Dominion Enterprises Hackathon

Kick off, 7 Schools and 9 teams from Virginia

A hackathon, also known as a hack day, hack fest or code fest, is an event in which computer programmers and others involved in software development, including graphic designers, interface designers, and project managers, collaborate intensively on software projects.

This was Dominion’s Seventh hackathon and the second edition of HackU, a hackathon where schools were invited across Virginia. Paired with three coaches and given 24 hours, each team was read a challenge on gamification and set off to build something. None of the members of our team had more that a few hours of experience with titanium and almost none with Lanica.

The inspiration

The concept of the game came from looking off the 20th floor of Dominion Enterprises. We were using the windows as white boards, and one of our teammates suggested a game where you dodged obstacles and projectiles on a motorcycle. But then we thought it would be more fun to be the one chucking the obstacles.

We wanted to make a game where you are a person on a top of a building who is pelting moving vehicles below. It evolved when we wanted to make our mischievous egger into a hero; We made the objective to egg cars to protect and the egger, a grouchy grandma.

the team

Looking 20 floors down

Neighborhood Watch was thus hatched. A pack of reckless motorists has invaded your neighborhood. Protect your neighbors as they cross the street by egging the cars before anyone gets hurt.

Playstore = https://play.google.com/store/apps/details?id=com.DWS.neighborhoodwatch Github: https://github.com/stanzheng/HackU2

Day1:

At the beginning of that hackathon we decided early on we would utilize lanica. After we brainstormed and prototyped our idea out, we started with a lanica boiler project and started from there. (https://github.com/Lanica/Platform/tree/master/platino/Engine/CodestrongCar)

After we did some tinkering we had a working demo in 30 minutes. Two cars that drove opposite of each other on the street with a sprite background we made.

Cars moving

We then inserted more sprites that our graphic artists created. Boom! Motorcycle parade

We then inserted more sprites that our graphic artists created. Boom! crazy town

After a bit of sloshing we got collisions working; in the context of the app we could crash two cars together and they would disappear.

Using this mechanic, we started adding pedestrians into the mix. Pedestrians

At this end of the night we had core mechanics working, day two would be about polish and presentation. It was nice how fast it was to prototype all our ideas out and then bring it together in Lanica.

  • Sprite movement
  • vehicle and person collision
  • Project Collisions

Day2:

End of the day, we polished our app. We added a couple of screen transitions and finalized the UI. We were really excited to show everyone our game and were nervous about everything working out correctly.

short video of all the mechanics working

https://www.facebook.com/photo.php?v=10203082376161824&set=vb.1278603133&type=2&theater

Load Screen Pan

our start screen

end score screen

End of this day + Display UI + Screen transitions + deployed to the app store

Presentation

The presentation hall was packed and 9 teams would be showing what they accomplished in 24 hours.

presentation time

We performed our presentation with an Ouyva, an android powered video game console. Due to the controller not working, we utilized a mouse to present.

Overall we took first place and Best in Show for use of Appcelerator/Lanica and the Dominion Enterprises APIs.

win!

If you’re still interested take a look at the source code and look below.

Some other notes and some of the Cool Stuff From Platino

Here are some of the notable ways we used parts of the game engine; The game engine did much of the heavy lifting and kept the game in the development zone. Writing in a familiar codebase of javascript, it was easier to produce. We did run into a few hic-cups and nuances in Appcelerator and Platino that the team had to work through.

Sprite Collisions

  • The sprites along with being really easy to import also inherited collision. This made it easy to do create listeners and events for when vehicles hit pedestrians or when the eggs hit the cars.

Camera Pan

  • The beginning animation was created using a sprite image and a pan. Super easy to create a pseudo-animated home screen. In addition, both of the home and end screens were created by sprites that we hoped to create animated span screens.

Transforms

  • The vehicle sprites were created with vehicle view sprites that we then rotated. This way we only needed a single sprite that we then could animate.
  • Jossling was also a feature we utilized to make the sprites seem less linear. It multiplied the sprites with a coefficient to of random bounciness, which made our assets come

Platino

  • The animations of Grandma tossing the eggs were created using transform along with Platino constants. This made it easy for to say, go from point A toB but in a curved way or in a zig zag.
  • Generally, Platino being built off of Appcelerator opened up a lot of common tasks in the framework.In our app, we were able to render full HTML pages for about and planned to create a UI for settings using titanium UI windows.

Created with love by The Grumpies

Stanley Zheng @stanzheng http://github.com/stanzheng Jose Mateo @jmate003 http://github.com/jmate003 Onapha Rattana @cosmicmeow http://github.com/cosmicmeow Trisha Tobias @aureately http://github.com/aureately Anthony Bittle @guywithnose http://github.com/guywithnose Chris Ryan @chrisryan http://github.com/chrisryan Brandon Beigay Krishna