Particles in Unity appearing in front of mesh

I had a weird bug in Unity today where particles that are supposed to be in the background were actually appearing in front of meshes that are closer to the camera.

After quite a lot of searching, the solution is actually simple, but wasn’t obvious so I thought I’d write it here.

So my particles are exactly where they are supposed to be, behind the land mesh. But are appearing in front (see image above).

Unity particles behind mesh

This is actually caused by the particles being scaled. I first found out about it from this thread on Unity Answers, linking to this forum post about it.

If I set the particles’ scale to 1, it resolves itself. I thought I’d have to muck about with sorting orders or layers (still not got to grips with those in Unity yet. Doesn’t seem to change anything to me).

6 reasons why I still prefer Bootstrap to Foundation

bootstrap vs Foundation

The versions I’m comparing are Bootstrap 3, and Foundation 5. Although I’m aware Foundation 6 has recently been released, which makes up for some of the shortcomings in this article – which is better late than never! But I’m still locked into Foundation 5 for many projects.

Bootstrap 3 has sliding animations out of the box

Both Foundation and Bootstrap have accordion components that expand and collapse. But only Bootstrap’s animate nicely out of the box. You can probably change this in Foundation but it’d involve rewriting the component – which is annoying when I’d rather have it working the best way possible right out of the box (that’s why we use frameworks right?!).

Same problem with the navbar. Bootstrap’s mobile nav slides down nicely, allowing you to see where it appears from. Foundation’s just appears and overlays the content, which is sometimes surprising.

I’m glad to see the new Foundation 6 does have an animated slidey accordion and navbar.

Foundation’s config variables

Foundation is very customisable, which is great! And in some ways it’s better than Bootstrap because you can change the look and feel of a component without having to override it’s basic styles.

The way it does this is by using config variables, and plenty of them! Each component has at least 10 variables, about sizing, fonts, colours, background colours etc, which when you compile all your SASS will style the component as you need. Without having to override any styles (and overriding some of Foundation’s styles is a horrible battle of specificity!).

Problem is – you’ve got to figure out what variables there are, what each do, and type them our (or copy & paste), which is more time consuming than writing CSS, because I’ve got CSS styles committed to memory, not Foundation’s arbitrary variable names.

It’s a good idea, but sometimes it’s faster to write normal css.

Bootstrap has glyphicons

I use Bootstrap’s glyphicons all the time. In my Foundation projects I’ve been using FontAwesome, which is great, but it’s nice to have decent icons built-in.

Foundation’s installation process

The tutorial for installing Foundation uses commandline functions to get it installed. Maybe if you’re used to using commandline all the time, you’ll see the advantage in this. But for a light user like me, I feel much more comfortable copying and pasting files into the correct directories.

The ability to @extend more stuff

I use @extend all the time, and find it useful to extend the styles of a class into another. But many places I’ve found in Foundation this errors, for example I was trying to @extend the .show-for-sr class into a new class that did the same thing and more, so that I didn’t have to type out all the styles (SASS will also smush these together in the css for optimisation), but this didn’t work in Foundation because of how these styles are written. Whereas extending .sr-only in Bootstrap is easy.

By default Foundation looks like ass

So out of the box, Foundation looks quite basic, and Bootstrap looks… well… like Bootstrap. This isn’t really a problem which is why I left it til last. There’s a very valid argument that a framework shouldn’t make your site look like anything – and you don’t have to look very far to see the impact Bootstrap has had on the web – many websites that all look the same!

Foundation is deliberately basic so you can apply your own styles, although I quite enjoy working on a site that looks nice right from the start.

All this being said…

…Foundation is decent, and I still think it’s much better to work with a framework than no framework. It does also have some cool things that Bootstrap doesn’t, like Joyride built in (although I’ve not used it yet), and Equalizer, a bit of JavaScript that makes all columns the same height – something that’s been an annoyance in CSS for so many years! (although has been finally fixed with Flexbox).

How I’d make English better

scrabble

I saw today that there’s some proposed French spelling changes, and it made me think we should do the same for the English language too, which is riddled with inconsistencies and unnecessary letters that create bizarre exceptions that need to be learned.

Here’s what I’d change:

  • Remove that pointless first “d” from “wednesday”, and the first “r” in february.
  • C at the start of any word should be replace with a k (unless it’s followed like a h, like “church”). Making “kool”, “krafty”, “krust” the same as the “k” in “kangaroo”.
  • Remove all silent ks, as in “knight” because it’s pointless. If people wanted to differentiate “knight” from “night” written down, they shouldn’t have used the same word to begin with!
  • Remove pointless silent gs from “gnaw” and “gnat”, they’re not needed.
  • Any w before an “r” at the start of a word is unnecessary too. “Wrap”, “wrinkle” and “wrist” would still make sense without it.
  • Replace any “x” at the start of a word with “z” as in zebra. Because z is cool and doesn’t get used enough.
  • Actually we can make use of z more, for example the word “lose” doesn’t seem to follow normal rules (it’s nothing like the similarly spelled ‘dose’ for example). So maybe we should spell it ‘looze’.
  • We pronounce a z in “organise” and “normalise”, so we might as well spell it that way.
  • Remove the unnecessary “ue” from the end of “dialogue”, “monologue” and “analogue”. I actually agree with Americans on this. Also on simplifying “doughnut” to “donut”.

Just think of all those letters we’re omitting. If everyone adhered to this in every email and Facebook statuses, just think how many bytes we’d save on the internet! It’s like adding our own level of compression 😀

Overriding a pesky parent selector with ninja specificity

ninjaI try and keep my CSS/SCSS in a fairly flat structure, and recently on a project I’ve been bugged by a parent selector which has been adding quite specific styles that have been getting in the way of my own.

The class is called .copy and has colour styles for <p>, <h2> and for <a>. So if I try to do something specific like give a result title a different colour, it gets overridden by the .copy h2 style.

I could of course make all my styles more specific, but this means adding in another class wrap all my SASS in body or an arbitary class further up the structure, but that’d annoy me because it’d be inserted into the css loads of times unnecessarily.

So I’ve taken to adding in extra selectors to provide more specificity, like this:

.result {
      &__title a,
      .copy & &__title a {

 }

Using the ampersand at the end of the line which in SASS will insert the parent (my new favourite thing) means that I’m covered for if the .copy class overrides my style, but without putting this style somewhere weird that I can’t find later.

It means I’ve added a bit of extra specificity which leaps in like a ninja when I need it, and I don’t have to do it to the entire section.

New 3D city asset project

So I’ve started creating 3D assets of buildings sat on asteroids.

Why?

Dunno really. Seems like they might be useful at some point. But for some reason these shapes have been in my head for a while, and I need to get them out. I’ve been creating them in MagicaVoxel, a great simple voxel 3D editor, and then collecting them together in 3Ds Max.

I’ve been keeping a blog of progress on IndieDb which you can see here.

I’ve also been adding some of these to Sketchfab as I’ve been going along, so you can see them in 3D. See below:

Isometric low-poly shop building
by daviddickball
on Sketchfab

I’ve discovered the ampersand selector in SASS & now I’m using it everywhere!

Once I discovered you could use an ampersand selector in SASS to reference the parent, I haven’t gone back. I’m using it everywhere because it’s so useful. Here’s an example copied from an article – the article explains it better than I ever could.

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

And here’s how the output CSS looks.

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

This is very useful! Especially when you want to keep css together by usage (I wrote about that here) so that you aren’t looking in multiple SASS files for information about every modification of a style.

Here’s how I used it today – I’ve got a class called “.copy” which is used for the content section of a page. There’s useful things in there like how the links and list items should look, because they’re a bit different to in the chrome (header & footer). But I wanted to create an aside section with different coloured text. Problem was, .aside p is the same specificity as .copy p, and I don’t want to start adding !important which could cause problems later on.

So I wanted to increase the specificity, but I didn’t want to add these styles for the aside inside the copy.scss – because that’s detached from the rest of the styles (which are in aside.scss). So I did this in my aside.scss:

.aside {
   .copy & p {
      color: #484848;
   }
}

Notice it’s between the .copy and the p. It outputs like this:

.copy .vacancy-aside p {
   color: #484848;
}

What I did in 2015

2015 is over and dead. But from the ashes rises 2016. Which it is today. January the 1st in fact.

Here’s what I did last year:

Helen and David in Carcassonne

  • Helped create an interactive display for the museum.

Joseph Wright exhibition at the Museum

  • Spent ages on a game about a giant space turd, which nobody liked, and even I hated by the end. I uploaded it to Newgrounds – see here (requires Firefox & the Unity player).
  • Grew a beard, then shaved it off.

David with a beard

  • Created some graphics for my brother’s card game – which he still hasn’t finished:
  • Created this blog! I’ve listed the most viewed articles from 2015 here.

My BotSumo game is now on the Android store

The simple & quite mediocre Android game (I’ve written about it before, here) is now on the Google play store. To download the game, go here:

https://play.google.com/store/apps/details?id=com.DavidDickBall.RoboSumo

It would be so great if you could please rate it, and leave a comment. If you find a bug or have a suggestion, leave that in the comments too – or tweet me @davidonionball.

Here’s a gameplay video!

The controls are dead simple, you have one button to drive the character forward. It spins by default, so it’s about timing. There’s an on-screen button for 2 players, the idea is you grab a friend and play using the same screen, just like the Microbattles Android games.

It’s only available on Android?

Yes, I’m going to only make games for Android whilst I’m doing it as a hobby, as it costs money for a licence to publish to the Apple App store. And if I’m not making any money out of this hobby, there’s not much point!

Want to get an email whenever I publish something new?

Good idea! Subscribe to this blog, which is about various things I’m interested in, or join this newsletter which is ONLY about games I make.