4 Hugues Ross - Blog: HTML5
Hugues Ross
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

9/28/16

Revamped Games Page

Last week, I discreetly pushed a new update to my website. I've completely redone the games page, improving the look and adding a few titles that weren't there before along the way.

I started work on a new site last year, but got too bogged down with Capstone to finish. Then, I got a job almost immediately after graduation (In fact, I'm starting soon. I'll make a quick post about it once that happens.). As a result, I haven't really had a time where I felt that improving my site and building a proper portfolio was really necessary, and the site has remained half-finished. Hopefully, I'll be fixing that problem in the coming weeks.

I decided to start with the games page for a few reasons. The biggest reason was that it was a horrible, disgusting mess of boxes, but I also felt that the games page was one of the most important parts of the site. While I make software and do other things, I am primarily seen by my peers as a game developer. Furthermore, the vast majority of the work that I've shared is game-related in some form.

So, what's new?
  • I've moved from the previous design (boxes with a small icon and some text/links) to a cleaner, more responsive design with tiles representing each game.
  •  Game information is now hidden; clicking a tile brings up  a popup with a description and links.
  • I've fixed the previously scrunched-up icons.
  • I've added controls to most game detail popups.
  • I've greatly fleshed-out each description. I would highly recommend reading through them all, as I've added some fun never-shared-before tidbits.
  • I've added The Last Light, Core Breaker, Cloudy Climb, and Growgue to the page.
That list of changes kept me busy for about a week, but the result was well worth it. I recommend taking a look at the new page here.

5/6/16

Console Programming 8-Week Project: Bringing DFGame to the web

This semester, I posted twice about console programming projects. They were small, carefully scoped projects to help me get a jump-start with DFGame. Now, it's time for the big reveal: My final, 2-month long console programming project. That's right, I

PORTED DFGAME TO HTML5/WEBGL

Yes, all of it.

One of the requirements for Console Programming is to develop at least one project on an unfamiliar platform or with unfamiliar tools. I decided to try my hand at developing a web-based game framework that was fully compatible with DFGame. The project was a big success, and I actually have a playable demo up on my site (based on the demo I produced for my previous project).
You can check it out here. (Note: you need a relatively recent version of a modern web browser such as Firefox or Chrome. IE won't work and Edge/Opera/Safari are untested)

Now, let's talk a little bit more in-depth about the project.

History

When I originally kicked off this project in class, I had much bigger aspirations. My original goal was to port both DFGame and Halberd, then add an HTML5 export option to Halberd's editor. Obviously, that was way out of scope. After a week or two, I decided to scope down to only porting DFGame, and that's what I stuck with throughout the project.

I wasn't sure how much of a demo I'd be able to put together, but I managed to complete the DFGame port quicker than expected and ended up with a couple of spare weeks to work on the demo.

The current demo doesn't have a title screen or audio in it, but is otherwise mostly indistinguishable from the desktop version.



Now, let's talk about the platform in general, and weigh the pros and cons of the platform.

Pros

  • This setup is mostly cross-platform. I don't have to worry as much about weird edge-cases, at least compared to developing native Windows and Linux versions of my games.
  • The games that I make with this are more accessible in general. There's no need to download an executable, just load up a link and play.
  • Since the library draws to an HTML5 canvas, I can pretty much embed DFGame into any web page that I want.
Those are some pretty good benefits. However, there are some pretty big problems with it as well.

Cons

  •  Unlike the C version of DFGame, all IO is required to be asynchronous. This isn't necessarily a bad thing, but it means that I need extra boilerplate to ensure that the right assets are loaded before the game begins.
  • The actual performance of DFGame is way lower when using the HTML5 version. This is to be expected, of course--You can't really compare raw C to embedded JS, especially not in web browsers with single-threaded renderers, such as Firefox's current release. Chrome currently gets way higher FPS than Firefox, but it still lags if enough is happening on-screen.
  • The WebGL API is currently outdated, compared to the current OpenGL and OpenGL ES standards. As far as I can tell, WebGL is still locked to the GLSL 1.0 standard, compared to 4.3 in GL and 3.2 in GLES. As a result, I need to rewrite all of my shaders whenever I move something over.

Further Work

Despite the problems with developing HTML5-based games, I'm actually pretty happy with the result. I think it's worth my time to continue developing and using the DFGame port, especially for game jams and other simple prototypes.

The port is currently behind, because I've been recently developing DFGame some more. I'll be posting about some of the new improvements soon. I also want to look into optimizing for WebGL better. I can't get a comparable framerate to the C version, but maybe I can eke out some more performance out of the web.

Lastly, I want to polish the demo some more. If I get it into a good enough shape, I think it could make a good portfolio piece. For now, I'm going to let it sit in a dark and dusty corner of my site until it's properly finished. Hopefully I'll have more time to do that now that my finals are over.