Transitioning the colour of an SVG image

So when trying to make the BTB website load as quickly as possible (which requires an unhealthy obsession with tweaking small things to get a better score on Google page speed insights) I removed Fontawesome, which was previously baked into our CSS file. I like Fontawesome, it makes adding icons easy, but has problems, and in this case the problem was unnecessary addition of loads of styles we didn’t need, and valuable kilobytes of data I wanted to shave off. Continue reading Transitioning the colour of an SVG image

jQuery – check if an element contains element

Forgive the jQuery! I’m just putting it here so I can find it again later 🙂

I’ve recently just had to create a menu in Foundation, in a CMS where I can’t change the menu markup (it just outputs lis and uls). So have had to use JavaScript to add the classes that Foundation needs to turn this into the slidey mobile menu. It feels like a horrible hack I know, but there’s no better way – and the Foundation menu needs JavaScript to display anyway.

So I needed to add the .has-dropdown class to any li containing a ul, which I did with jQuery’s .has() function:

//-- Add Foundation dropdown classes to subnav (so mobile nav works)
$("#main-nav li").has("ul").addClass("has-dropdown");
$("#main-nav li ul").addClass("dropdown");

Maths problems are the worst, and how I added a pointer arrow to a moving target

The biggest criticism of my recent game (other than it being a shit game about shit) was that it was difficult to find the enemy turd in level 1.

I thought that the best solution for this would be to add an arrow pointing in the direction of the enemy, to follow. I’ve seen this in so many games that I assumed it would be dead easy to add. Something like this:

arrow to target

Turns out I was wrong.

Or maybe it’d be easy if I was better at mathematics. But for me this was a hard one to solve. Knowing that my grasp of maths is worse than the average gym instructor, I trawled the internet for help. Luckily Unity’s community is large and this question has been asked many times. However every answer I found seemed to be lacking something, and wouldn’t work for me. Possibly because I was adding my arrow to the UI layer (and I’m not changing that because it’s sensible. Sensible goddammit!) meaning that the axis is different – my gameObjects rotate on the y-axis, but I wanted the arrow to rotate on its z-axis.

Anyway, despite spending a lot of time in Unity Answers, and posting the question twice but slightly differently worded (I was getting desperate) it was a Facebook comment where I got a good link to a solution. Here’s the solved formula:

//--point arrow to enemy
var dir = transform.position - target.transform.position;
var angle = Mathf.Atan2(dir.z, dir.x) * Mathf.Rad2Deg;
arrow.transform.rotation = Quaternion.AngleAxis(angle+90, Vector3.forward);

So thanks Regan No, and the link he sent: http://answers.unity3d.com/questions/654222/make-sprite-look-at-vector2-in-unity-2d-1.html

This means I can rotate the arrow around the center of the screen. Now quite attached to the edge, like I wanted. But good enough!

Making the arrow hide when close to the enemy

I wanted to hide the arrow when it got too close, as it’s then useless. So faded it out. Here’s the full script (or see it on GitHub):

var target : GameObject; // GameObject to point to
var arrow : GameObject;
private var angle : float;
var fadeSpeed : float = .05;
var amt : float = 0;
var distanceToTarget : float;

function Start() {
   arrow.GetComponent.<CanvasGroup>().alpha = 0;
}

function Update() {
   //--point arrow to enemy
   var dir = transform.position - target.transform.position;
   var angle = Mathf.Atan2(dir.z, dir.x) * Mathf.Rad2Deg;
   arrow.transform.rotation = Quaternion.AngleAxis(angle+90,    Vector3.forward);

   //--get distance
   distanceToTarget = Vector3.Distance(transform.position, target.transform.position);

   if(distanceToTarget < 4.5){
      //--fade out
      if(amt > 0){
         amt -= fadeSpeed;
      }
   } else {
      //--fade in
      if(amt < 1){
         amt += fadeSpeed;
      }
   }

   arrow.GetComponent.<CanvasGroup>().alpha = amt;
}

You can download this game on IndieDB.

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.