HTML5 Game Development Camp

Just so you know, The Hypertext Mark-up Language doesn’t just empower the world wide web with its customary interpretation of filling our browsers with daily news, our friends’ status updates, tweets from our favorite celebrities, and everything that delivers day-to-day information. But since the birth of HTML5, a new era of HTML development came to the web, it is game development. It’s been going around for years now, and many game developers enjoy the effectiveness of running their games through this platform. To make a short throwback, let’s take a look at this timeline from wix.

History of HTML 5
src: mashable | The History of HTML5

While HTML5 is still making its way to the top, DevCon PH grabbed it as an opportunity to further hustle the Filipino and non-Filipino developers and get familiar with HTML5 game development. To continue the part of their month long series, with support from Game Developers Association the Phils., Eqela, Accenture, Philippine Game Developers Community, Play’nGo, and Globe Labs, the last day of breaking through lines of codes was successfully set in grace last June 20, 2015 at the Globe Telecom Showroom, Makati City.

Just finishing up the preps for the event came these early birds. Ian, Kyle, Jerry, from Accenture, and 
Just finishing up the preps for the event came these early birds. Ian, Kyle, and Jerry from Accenture, and also Anelle from Teloworks PH. They all received free Eqela T-shirts.

By the end of 9AM, the chairs were filled with bums of enthusiasm. Mr. Joel Bautista of DevCon officially started the camp with a cheerful greeting in behalf of the whole DevCon community. Given the usual rap, everyone set up their gadgets and prepared as the first speaker stepped in front.

Mr. Joel Bautista starts the morning talk by introducing DevCon.
Mr. Joel Bautista starts the morning talk by introducing DevCon to the participants.

Mr. Joel Larson came all the way from Sweden to share his love of gaming and talk about Play’n GO. Everybody was amazed when he showed their HTML5-made casino games. And what’s more to it is they support almost all mobile devices, which Mr. Joel was keen on pointing out. Their mission is to always give a guaranteed entertainment to all their players. Even though they are just a small group of employees, they sure can make jaw dropping games which reflects to how much they absolutely enjoy creating. If you are a gaming pro and you want to share your talent to the whole world, tell them about it.

“Knowledge is perishable.” Everybody showed their interests as Mr. Joel Larson of Play’n Go talked about the fun of developing games. He also featured their game called gemix.
Nova Blast! – Play’nGo’s Gemix, a highly addictive puzzle game developed using HTML5.

If you are looking for a company that completely adjusts to your app’s portability demands, then Eqela is just the right thing for you. As the next speaker, Mr. Markku Kero from Eqela expressed how their company can help millions of people, allowing them develop the impossible. They are focused on providing solutions to individuals, as well as to other companies. Eqela translates applications to any known operating system. It does not matter if you are a programmer or not, with Eqela, providing the solutions your application needs to fly into the cloud is their ultimate goal.

Mr. Markku Ekko, going through the transitions from the base application to mobile power. (Java for Android, JavaScript for web browser, C# for Windows Phone, etc.)

Representing the Game Developers Association of the Philippines, Mr. Solon Chen from Kooapps deliberated his informative presentation with cheerful remarks. As a Board Member and Membership Committee Head to GDAP, and a Technical Consultant at the Commission on Higher Education (CHED), Mr. Chen is committed towards bringing genuine bright ideas of Filipinos in the IT industry to the place of discovery and appreciation. He endorsed many of their affiliates, including Anino Games, CheQ, Digital Art Chefs(which has tons of fascinating portfolio samples here), and many more. It’s surprising and wonderful to think about how many talented artists and developers are growing fast right under our noses. Come to think of it, Mr. Chen also mentioned that Filipinos took a great part in functioning as digital artists to the ever famous anime manga/series One Piece (TOEI Animation Phils., Inc in Eastwood).

Our country’s insights in game development, according to him, travels from design, the art, the engine, and lastly to the technical and commercial aspects. Being on the border between the youngsters and the industry, Mr. Chen encourages the youth to join them and further implode our country with bold and overflowing creative developers and graphic artists. Like DevCon, GDAP is also devoted on establishing events that help mend the minds of the eager learners. They assemble academic roadshows and game festivals. They also offer game development courses. They even teach high school students how to create games.

Mr. Solon Chen from Kooapps, with his discussion about GDAP services and operations.

The main event was instructed with the service of Mr. Benj Tupas from Blueprint Gaming. But before the tutorial, he showed a short video about how and why HTML5 carries an important role as a next generation game development platform.

HTML5 added new cool features that greatly helps a developer code conveniently. src : What is HTML5?

Benj is a huge fan of HTML5. It’s ability to be executed on different platforms is one thing that makes it widely efficient. Although some browsers are not yet fully compatible with some features of HTML5, it’s fast growth will inevitably put a mark on their priority list.

Mr. Benj Tupas from Blueprint Gaming lead the game dev tutorial and the hackathon session.

To start the coding proper, the participants were asked to download some files to enable them run their own codes from the demo. You may access those in this link. The goal was to create an empty frame capable of handling a few entity, that is with an image file of Mario and an Angry Bird.

These two were the characters for the hackathon.

After the traditional ‘Hello, World!’ program, the two entities were then added to the frame. To liven up the atmosphere a bit more, couple of questions were asked to the participants in exchange for souvenirs. The first step was to download the assets, followed by creating the project folders. Adding up the entities for Mario and the bird came next. Benj was quick with aiding those who needed support. Minutes later before noon, everybody was halfway to their assignments.

Focusing on their scripts, the participants are determined to get the most out of the day.

A quick informative segment from Accenture representatives took place in the middle of the exercise. An emphasis to Accenture Digital was tackled. A great deal from the digital community is an extreme factor when digging up significant client analysis to help one’s organization. The services of Accenture Digital enables your workplace to know the people more specifically and effectively.

Chai and Marge from Accenture gave everyone the chance to win these fabulous prizes.

Ms. Erika Gatmaitan from Globe Labs briefly discussed the overview of their services, they have APIs for those who are eager to experiment on their available tools. Globe has been totally generous and supportive with DevCon events. Last May 16th, they sponsored the 5th iOS Code Camp.

Just after lunchtime, the final step for the exercise punched the clock. Animation and inputs, setting up key codes for the entities were handled smoothly. Finally, they were able to horizontally navigate both the characters.

Watch’m Whip! Watch’m Nae Nae! They’re dancing across the screen by the arrow keys.

The challenge for the afternoon hackathon was to (1) be able to set a canvas boundary to Mario, (2) enable the angry bird to ‘teleport’ by passing thru one side and appearing to the other, and (3) to display an alert whenever both entities collide. Tiger looks and crossed eyebrows filled the Globe Labs showroom.

Almost everyone decided to try and code the seatwork, but only a few were able to execute them completely. Before the presentation, Ma’am Cleah D. Nava, from iAcademy talked about the Continuing Education Program and other opportunities offered by their institution. They have several programs including Game Programming and Design, Animation, Web Development, Financial Management, and also Fashion Design and Technology.

From iAcademy. Mr. Allen Saraza, Course Coordinator, and Ms. Cleah Nava, Senior Business Development Manager.
From iAcademy. Mr. Allen Saraza, Course Coordinator, and Ms. Cleah Nava, Senior Business Development Manager.

Mr. Marnielle Estrada from the Philippine Game Developers Community also made a brief discussion about PGDC. They aim to promote the competence of our country in the aspect of game development. Bringing together professionals and aspiring game devs through forums and events is one way of stirring the popularity of this new phenomenon in the Philippines. Sharing a part of their achievement, he displayed the a video from the Game Jam at Ateneo held last January 2015.

Charles, a CS student from FEU, enjoying the delightful afternoon snack sponsored by Mr. Joel Larson of Play’nGo a few minutes before the hackathon presentations.
Presenting his work, Mr. Jollet de Lorenzo explained how he came up to achieve the required outputs.

The recognition hour came at last. Dozens of freebies were given away by DevCon, Accenture, Eqela, and Globe Labs. Of course, the mighty presenters for the hackathon brought home a couple of tees and complimentary items.

Shown above are the early birds with their Eqela tees, and the social media winners, joined by Mr. Tupas and Mr. Bautista (rightmost).

Mr. Joel Bautista addressed his thanking remarks in behalf of the DevCon team and the big-hearted sponsors. Everybody gathered close together for the class photo. Another game dev episode ended with amused and satisfied smiles from all the people who became a part of this awesome day.

Thank you guys!

 — Click here for more DevCon events.–

-View complete Photo Gallery-

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.