Sometimes, when you think you know how well (or poorly) a particular task will go, you’re right. However, if you’re doing game development stuff, you’re probably wrong, unless you think things will go poorly, in which case game development will make you think that you were wrong about it going poorly, but only long enough to show you that you were right the first time, and you were in fact wrong. Clear as mud? Welcome to game development!

Of course, I kid. I’m sure this has nothing whatsoever to do with game development and it’s probably just software development itself. Over the years I’ve learned that the universe can be quick to anger and takes offense at even the most innocuous of slights.

This week I continued last week’s quest to get canvas scaling and fullscreen working, and we’re most of the way there, so huzzah!

When the stage is created, you can specify a boolean to indicate if the canvas should try to scale itself up and down to fit the client area (which defaults to true). When this is set, the canvas sizes itself up or down to be as large as possible while maintaining its aspect ratio and filling up the window as much as possible. If you provide false, the code that is responsible for resizing and repositioning the canvas still triggers, but always forces the native canvas size.

Touch events are also now implemented to mimic mouse actions, which means that in the general case, as long as the keyboard is not needed for any particular game, the same code will work on phones/tablets as on the PC.

I also set about implementing the ability to go fullscreen with the canvas. This is implemented as a property that indicates if the canvas is currently fullscreen or not, a function to either turn fullscreen mode on or off (based on a boolean parameter), and a toggle method that flips between the two.

I expected this to go fairly well, and for the most part it did. Things work the way I want them to in Chrome, but are a little wonky in Firefox due to that browser applying CSS that breaks the aspect ratio of the canvas. Chrome does this a little better by triggering a resize event when going in and out of fullscreen mode, which makes the current code just work.

Actually, I’m not 100% sure that Firefox doesn’t also trigger a resize event, but the forcing of size to put the canvas out of aspect is enough to break things, so this needs a little more work to be more cross browser compatible.

In any case, I pushed a new release for ts-game-engine with the current version of the code, and then modified ts-tennis to use it. I also brought ts-breakout up to date with the current engine and finished the next exercise, which simply shows lives left as pictures of paddles instead of a number.

I can’t remember how it came to my attention, but I also spent some time this week looking into Wren, “A classy little scripting language”. It’s fairly small and expressive and has a pretty nice embedding API (at least at first blush). Normally I would use Lua in this capacity, but it requires a bit more setup to do classes. Additionally, although it has syntactic sugar to make method calls nicer, it does not enforce that this sugar always be used, which can cause brain fart problems.

Based on my investigations, I’m not 100% sure at the moment if I would actually use Wren in anything. My main peeve is that in order to do away with statement terminators (which are apparently super evil?) and keep the syntax unambiguous, it forces a code style on you that makes my eyes hurt. I’m sure I could get over that if I needed to, so time will tell. It seems weird in 2016 to have a compile fail because you put a newline between a conditional expression and the conditional code, though. I have plans to do a more in depth entry about it in the coming days, so stay tuned.

My plans for the upcoming week are to see if I can fix up the fullscreen code, maybe finish that title screen exercise, and if there is any time left over, Work on the Wren blog post. However, that said I have Monday and Tuesday off, so time in the coming week may be more constrained.

Like trying to make CSS position an element where you actually want it, fingers crossed!