July 2015 – David Ball's blog

I’m literally polishing a turd

I’ve been trying to finish my latest Unity game, the one I mentioned at the end of a recent article (see here), and which I’ve been posting updates on IndieDB (see here).

It’s just a silly game, I’ve been creating for the purpose of learning new stuff, making sure that every script I write can be reused in other projects, so eventually I can have a toolkit ready to go, to make progress much quicker.

It’s been almost done for ages now, but…

The last 10% takes 90% of the time.

Or at least that’s what it feels like.

I want to get this project finished so I can move on to a cooler, less stupid game. One maybe worthy of putting on Steam greenlight. But I don’t like making anything that isn’t at least finished. I’ll be putting this onto Newgrounds, for some people to play, although the Unity plugin doesn’t work in Chrome any more, so its audience is limited.

Don’t get me wrong, this won’t be a super polished game, but things that end up taking a long time are those little bugs you notice, I had one problem where the player gets stuck on a particular bit of terrain, and I spent ages tweaking the drag/mass/velocity values of the ridigbody.

And sound.

Sound DEFINITELY takes a long time.

In fact it didn’t take me long to find the background music, there’s loads of great royalty free stuff on Newgrounds you can just use as long as you credit. Oh that’s another thing I have to do, create a panel on the menu for addign credits. Dammit, UI stuff in Unity takes a lot longer than in just HTML/CSS.

I wanted a bit in my game where the background music changes when the user enters a certain area. Just little tweaks like that is the sort of thing that takes a long time.

Another thing I added is a screen that flashes up to show the keyboard controls, as I realised it wasn’t obvious at all which keys were used. That’s something else that takes time. Hopefully though the script I created for that will be reusable in another project.

I admit I did get carried away adding stuff to this project that I didn’t intend to at the start. I’ve added turrets, something that actually didn’t take too long, but is an additional extra I didn’t plan for.

And making turrets target the player and fire took me at least 3 evenings because it involved maths (not my strong point) and because 3D is harder than 2D! The turret is above the player, so it has to angle down and shoot, which would look much better (I think) in 2D.

I do wonder if working in 3D has slowed me down. I’m sure all those crappy Flash games I made at Uni didn’t take this long!

There’s also things that I haven’t managed to do, even though I’ve spent a lot of time on. I really wanted an arrow pointing to a target off-screen, like this…

But it’s just too difficult for me right now. Maybe for another project.

So anyway, I’d better wrap this up and stick it on Newgrounds asap.

A vertical-align mixin that changed my life

Aligning something vertically has always been a PITA in CSS, and in recent years I’ve used display:table-cell to achieve this, which is added to the parent object of the one you want to vertically align.

This method works ok mostly, but display:table-cell isn’t what you always want on an element, leading you to have to create another element which wraps your vertically-aligned one (and I don’t like having too many elements!).

I recently found these 3 lines of css, which work really well at aligning an element vertically:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

And stick these into a mixin, and you can import them into any style, like this:

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align;
}

I’ll leave this here for when I need to copy & paste this into my next project!

Credit: I found this snippet here.

Chrome pulls Unity plugin

I spent a long time mulling over which game framework to learn, and the biggest benefit of Unity was it’s export options to so many platforms. I’ve always enjoyed making web games, something quick and easy to play, which loads right in the browser, so I can easily show people by sending them a link or putting it straight on Facebook.

It’s so much easier doing that than asking for someone to download an executable file, which always seems like a big ask, or on a mobile to go to the app store (and the inevitable problem of being in ALL app stores, so that people aren’t excluded), and downloading, making sure they have enough space on their device etc etc, that all seems like a ballache compared to flinging someone a link to see what they think of the half-finished thing.

So Unity did still have that benefit. I could add a crappy game, half finished and buggy to Newgrounds, to see what people thought, and they didn’t have to do much (okay I suppose they had to have the plugin, but that’s only the same as Flash player for Flash games).

Chrome has now killed the Unity plugin

Which means it’s less easy to show a WIP, or a small game that only took a few days to make without the rigmarole of having to download it.

I’m hoping the time I invested in learning Unity wasn’t wasted, because it still is an awesome tool for exporting to Android and other platforms (although I haven’t made anything decent enough to distribute yet).

It’s not all bad, it looks like Unity has a way to export to WebGL, which means it should work in the browser WITHOUT even needing a plugin, which is even better. I just haven’t experimented with that yet.

But I probably will!

The image at the top of this post was created by someone who I think is quite pissed off about it. I got it here.

Adding to Bootstrap’s breakpoints variables

In Bootstrap projects you can use the default breakpoint sizes as variables, like this:

/* ================================================
Screen sizes
=================================================== */

$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

$screen-sm-max: 767px;
$screen-md-max: 991px;
$screen-lg-max: 1199px;

…which is useful when writing media queries, like this:

@media (min-width: $screen-sm-min) {
    .upload-item {
        font-size:1.2em;
    }
}

@media (min-width: $screen-md-min) {
    .upload-item {
        font-size:1.5em;
    }
}

I could have chosen any sizes as breakpoints really, but it made sense to match them to the default grid sizes in Bootstrap (col-sm-6, col-md-6 etc).

Although sometimes I find the size range before $screen-sm-min a bit too large, especially when you think about the range of phone sizes. So I add an additional:

screen-s-min: 500px;
screen-s-max:499px;

SCSS boilerplate with Bootstrap baked in

I know starter projects using Bootstrap are common enough, but I’ve added to the plethora this week by adding my own to Github in a public repo.

What is it?

It’s a dead basic project using Bootstrap which compiles all of Bootstrap’s SCSS plus your own SCSS styles into a single CSS file. It’s component-based, so useful features like buttons, forms, etc are in separate scss files for ease of finding. Because it’s all compiled as one big project using SCSS, you can @extend Bootstrap’s classes so you don’t have to add all their zillions of classes all over the place, cluttering your markup.

All the files are in the hierarchy I wrote about in this article.

Why?

I’ve been working on a few projects recently that all needed a sensible starting place. It saves all that setup time I guess. It’s not like this is amazing or anything. It’s just how I’ve started every project lately so thought it was handy.

Limitations

Bootstrap are bringing out new versions all the time. Therefore it won’t be long before my repo is out of date. I’ll maintain it for as long as it’s useful to me, but if you’re going to use it, check for a new version of Bootstrap first and potentially copy the files across. I always leave the Bootstrap folder untouched in every project, extending or overwriting the classes if I need to change them, in case the originals need to change.

See the GitHub repo here.

My 1st & 2nd games built in Unity

I’ve been spending a lot of my spare time recently creating a Unity 3D game. I’m still very much a beginner at the platform, and each game I work on feels like the first. I’m still learning, but getting faster with each project.

The latest project has taken me months already, fitting it in around work and other commitments.

But I’m not going to write anything about that yet (okay that’s a lie, I’ve written plenty about that over on IndieDB already – click here), because I haven’t yet blogged about the games I created first.

The 1st game – ReTardis

Because I was a total beginner, I started on a ridiculous project that wasn’t to be taken seriously at all (hmm, that sounds familiar, this applies to my 2nd & 3rd attempts too!).

I did add it to Newgrounds though, you can play it in the browser – click here.

The 2nd game – Starbug Thruster

Starring the spaceship from Red Dwarf, one of my favourite comedies as a teenager, this game was based on the physics used in my previous game, but simplified for mobile touch interface. You only have to touch the left or right of the screen to thrust up and in a direction.

I loved making this game, and based the story around Blue Dwarf, the text-based game I created many years ago, and which people still play (because it’s awesome, and the most rewarding game you can play).

I spent some time creating it for mobile, although abandoned that idea when I realised using a spaceship which is someone else’s IP isn’t a good idea. I might bring back the idea in a future game though. You can play this in the browser on the Newgrounds website – click here.

The 3rd game – Attack of the mega turd from space

Yes. You read that correctly. This is another ridiculous game. It’s so ridiculous I wrote about it how ridiculous it is here.

Intended to be another silly learning experience, I’ve actually been putting a lot of effort into this game. And I’ve been learning a LOT. I think my next Unity project will be a lot quicker, as I now actually know what I’m doing.

Here’s a sneak peak of the progress:

Okay that screenshot doesn’t actually feature a turd. But there’s more to this game than the title.

I’ll be posting more progress and screenshots on IndieDB – click here.