I relearned basic trig today...kind of...sort of...Let's just say my thing works and leave it at that.

Posted on August 5, 2012 | 5 minute read

Today I experimented with positioning entities on top of each other to make a boss with specific areas that you have to target in order to kill. Hitting the rest of the body does little to no damage, but hitting specific areas with the right weapons increases damage dealt to the boss. These could also be used to customize other properties, like having different hit areas be different sizes, types, etc.

I wanted the main boss body to rotate (and its “hit area” entities with it) as opposed to just move on the x and y axes. This way bosses wouldn’t have to just move up/down and across (though that, too), but I could make stuff like tentacle bosses and round bosses that spin and all kinds of other stuff that would just look and act much cooler.

Problem: I don’t know math well enough to be able to code a small entity moving in sync and in-position with a big entity as its animation angle is changing.

So what do you do when you have a trig problem you have no idea how to solve? You call your mother, of course.

On my mother - math genius - and school in Ukraine

My mom graduated from college in Ukraine as an engineer. School in Ukraine puts a lot of importance on math. She says she’s forgotten a lot of it now, but I’m betting she still knows more than my high school teacher. I still remember her and my grandparents regularly making me recite the multiplication table since before I started preschool.

It’s not really just math; I think the pace of learning is a lot faster in general in Ukraine, for any subject, than it is in the US and Australia. At the time of our move you graduated from secondary school after year 10, and you skipped year 4 completely. Some years we had school on Saturdays. The school system has changed now so it’s not exactly the same, but this gives you an idea. When we moved to the US I already knew everything that was taught in math class for 2 or 3 years. But when my US-based education finally started catching up to what I already knew from Ukraine I didn’t put enough effort into math, taking more of a liking to English. I regret “abandoning” math now.

I tried to explain what I needed to do over the phone (with lots of arm waving). “Like a pendulum! The thing on the clocks!" I said (only in Russian). “Imagine a pendulum swinging back and forth, and a ribbon tied to it, and you have to figure out the position of the ribbon as the pendulum swings to and fro."

After semi-getting what I was talking about, my mom rattled off some things in Russian for me to Google: “Radioos okroozhnasti”, "something vektor something", “tsentr vrasheniya”, etc.

I had to make sure with her that I knew exactly what each of the things she mentioned translated to in English (“No no, okroozhnast isn’t circle, kroog is circle, okruzhnast is distance around kroog” “Oh you mean circumference!")

Success!

I re-learned (a little) about sine, cosine, tangent, arctangent, and other stuff that I didn’t end up needing really for this particular mission, and ended up finally getting my boss entity rotating with little floater entities moving in sync.

So in my boss.js I have EntityBoss and EntityHitarea. EntityBoss spawns EntityHitarea on init (for now just one, but the idea is to have different numbers of hit areas doing different things on bosses of different kinds and difficulty levels). It sets itself as EntityHitarea’s “parentBoss” attribute.

For this experiment I just grabbed a cog Photoshop brush set I had and used a plain 200 x 200px cog for the main boss body. This would be the main spinning entity. In its update.js, it does this:

    this.currentAnim.angle += Math.PI/6 * ig.system.tick;

You can also set vel.x and vel.y of EntityBoss to make it move in whatever direction and its hit areas will follow. In the EntityHitarea update function, this happens:

update: function() {	
    // Get angle of parent boss animation
    var angle = this.parentBoss.currentAnim.angle;

    // How far away from center should hit area be positioned
    var radius = 70;

    // Specify pivot point, center of the boss cog
    var centerX = this.parentBoss.pos.x + this.parentBoss.size.x / 2 - this.size.x / 2;
    var centerY = this.parentBoss.pos.y + this.parentBoss.size.y / 2 - this.size.y / 2;

    // Set appropriate x and y position
    this.pos.x = Math.cos(angle) * radius + centerX;
    this.pos.y = Math.sin(angle) * radius + centerY;	

    this.parent();

}

And it works! [caption id="attachment_48694” align="aligncenter” width="252”]JavaScript angle rotation Gray cog: EntityBoss; blue outline: EntityHitarea moving with it.[/caption]

At one stage earlier on I found it helpful to draw lines going from my pivot points to the entity for debugging. You can draw a line from one point to another by overwriting the entity’s .draw() method:

     draw: function() {
          var startX = ig.system.getDrawPos(this.pos.x - ig.game.screen.x);
          var startY = ig.system.getDrawPos(this.pos.y - ig.game.screen.y);
                
          var finishX = ig.system.getDrawPos(this.centerX - ig.game.screen.x);
          var finishY = ig.system.getDrawPos(this.centerY - ig.game.screen.y);
                
          ig.system.context.strokeStyle = "green";
          ig.system.context.beginPath();
          ig.system.context.moveTo(startX,startY);
          ig.system.context.lineTo(finishX,finishY);
          ig.system.context.stroke();
          ig.system.context.closePath();          
     } 

[caption id="attachment_48695” align="aligncenter” width="250”]JavaScript draw line between points Drawing lines between points[/caption]

After the victory dance I found someone asking about this exact same thing on the Game Development Stack Exchange, with an awesome answer explaining exactly what I needed. This entire ordeal would have been a lot easier if I just found this page before sticking my nose in this mess, but I’m actually really glad that I managed to muddle through it.




Categories:game dev dev games
comments powered by Disqus