https://pauldyan.wordpress.com/feed

I picked up the new Pokemon Legends: Arceus last week and my boys and I are really enjoying passing the controller around to take turns roaming the open regions of Hisui in search of new pocket monsters to nab. It’s inspired me to prototype a monster battler of sorts – but built specifically for multiplayer!

I wanted to build this in Unreal Engine 4 this time and get more intimately familiar with its network framework and set of sacred classes. If you’re on a similar journey, I found Cedric Neukirchen’s “UE4 Network Compendium” pdf to be an excellent complement to the official Epic documentation. Do check it out! Early on, I found myself often revisiting the server/client Venn diagram on page 10 to sort out why things weren’t replicating as intended.

I stood up a basic flow where a player can create a session that other players can search for and join. Once a session has two players, it closes itself off for others to join and the server begins the match. The match concludes when a winner is declared or the timer runs out at which point, all players are funneled back to the main screens.

Players are primarily limited to two actions: changing their active monster and attacking. All actions have a cost that’s throttled by a timer-based mana system. Attacks are setup to define elemental types and critical hit probabilities. Speaking of which, the damage formula follows something along the lines of this guide.

Honestly, there’s nothing super exciting to see here in this rudimentary experience, but I’m particularly happy with how much I had to learn to overcome the many, many mistakes I made along the way to make sure a) things replicate as intended, and b) anything of consequnce to gameplay is server authenticated and initiated.

After years of dragging my feet, I finally buckled down and gave Blender a solid few nights and weekends to learn. I’ve been reluctant to give it my time only because I’ve invested years of experience into Maya, but what pushed me over the edge was seeing so much incredible work being done with Blender and my loathe for Autodesk’s insistence on high priced subscriptions.

Blender is an amazing tool. It’s mind blowing that it’s free. I really love the concept of the 3D cursor – coming from Maya, I often create a bunch of temporary locators in order to have a reference to a transform to snap things to, but Blender has a 3D cursor that is always available for things like this. Sounds little a small thing, but I’ve found it to be extremely useful.

Blender also comes with a set of add-on tools called Rigify. It helps to generate modular rigs for common structures like arms, legs, tails, etc. I decided to explore this by rigging the beautiful Aang model by Mia Pray and making a custom attachment system for his staff. This was really just a way for me to practice, but I may come back to this sometime in the future. I’d love to see Aang running around in game…

My kids and I have been watching the Avatar series – both The Last Airbender and The Legend of Korra. We love so much about the universe – the mysticism, the fight choreography, the factions, the individual journeys. It’s so so good and I can’t believe it’s taken me this long to dive in!

I made a quick and dirty low-poly model of Aang to try out some ideas with a character controller. I also rigged a staff that actually folds out into his signature air glider. I honestly don’t have much of a goal here and am just enjoying aimlessly adding to its abilities with stepped framed animations. It’s really satisfying to try out ideas with 2-3 frames of quick poses and have it running around on screen in a matter of minutes without getting caught up in polish and refinement!

It’s hard to believe it’s been FOUR YEARS since I first played with EVA foam to make the Boba Fett helmet. Since then, my two boys have really gotten into the Mandalorian, so we made Din Djarin’s helmet to complete the squad.

It took a few tries to get the Beskar color and finish looking right – we found that polishing with graphite really brings it to life!

This Christmas, my wife’s side of the family decided to do Secret Santa. I made my brother-in-law a glasses holder out of scraps of wood. Does it look like his dog, Fred?

For Halloween this year, we dressed up our giant puppy, Domino, as Avatar Korra’s trusty companion – Naga. How do you think it turned out?

I had the great privilege of being invited to speak at GDC on the making of Crash Bandicoot 4: It’s About Time. Never would I have thought my first GDC presentation would be from the comforts of my own home – what a strange year it’s been! Usually these talks sit behind a subscription, but fortunately my talk has been made available for free on Youtube. Enjoy!

With the player prefab mostly in place, I duped it and wrote a special controller script to drive it around autonomously as a bot. I sketched out an initial plan for its search and destroy behavior flow.

I gave this new prefab a big, green, cone collider attached to the end of its nose. They randomly scan around the environment “looking” for enemies. If another tank enters the collider’s trigger, the controller script then calculates the distance and angle between the two tanks.

At this stage, a human player would typically take an instinctive guess at the pitch and power for the initial shot and then adjust and tune the controls until a hit is achieved. I wanted to simulate that kind of imperfect, but adjusting behavior.

The first step was to establish what my bot’s first instinctive guess should be. I setup a target at various distances and manually fired at it, recording the power used to achieve a successful hit (with a constant pitch and no wind conditions). I plotted these to a graph and then punched these values into a function equation finder. I used this equation to drive the power setting for the bot’s initial shot.

If the projectile misses (which is very likely since bots are also affected by wind!), it will determine if the shot landed too far left or too far right from the target. Then, it will adjust its facing by a random angle and repeat this sort of adjustment until it has successfully hit its target. It does a similar adjustment for its power if the shot lands in front of or behind its target.

Bots spawn in at random locations. You can see two of them working reasonably well in this video. That said, this is a very simple test and if I were to continue, I’d want to account for varying elevations, occlude the bot’s visibility so it can’t see through obstacles, and introduce movement as a way of scouring the environment and evading attacks.

With the core shooting mechanic mostly in place, I took this little prototype a few steps further by building out several new systems. First priority was to write the sign in flow and lobby to match players together for a game.

Once in a room, the server randomly generates an arena and replicates it for all players (at least for the main obstacles, the explosive barrels aren’t showing up for clients at the moment!).

Projectiles now consume mana – which grows over time. I built a UI system similar to the one I ripped from Clash Royale in an earlier test.

I converted the projectile class to be a scriptable object to more easily stamp out a variety of different behaviors and effects. So far, I made a teleporter, napalm, a projectile that has a spinning array of child projectiles that I call “Mother Bird”, and another that explodes into baby projectile bubbles on each collision.

I also added a temporary shield that protects the player from most incoming attacks from the front. Speaking of which, players can now die and respawn properly and the number of KOs is used to determine a winner when the match time runs out.

I’ve now taken this little proto a lot further than I was planning to, but I’m very much itching to try and make some basic bots to fill the arena (and figure out how to write logic for aiming and readjusting as conditions change). Stay tuned!

With a little bit of hacky Photon experience under my belt, I was keen to do something a little more involved than just replicating the movement of some colored pills on an open plane. I fumbled my way toward a third person artillery mechanic where swiping left/right changes the tank’s facing, swiping up/down changes the aim’s pitch and holding and releasing the fire button determines the fire power of the projectile.

I also built a wind system that randomizes every so often to create a thin layer of randomness to the environment that the player would have to account for. Here my boys are helping me playtest. Next step is building the multiplayer framework and then adding some variety to the projectiles.

It’s been a long while since I’ve last built something in Unity so I decided to jump back in and try and learn more about real-time networking. Turns out, Unity doesn’t yet have a native solution that’s battle hardened in 2021 (surprisingly!) but there are good third party alternatives – Mirror and Photon Pun seem to be the next best thing. I gave both a spin, but found Photon to be a lot easier with great documentation.

In this video, I was able to connect two Android devices and a Mac (on different networks) in the same Photon room and replicate the match state and individual player actors + data for a Bomberman-esque setting!

It’s a big year for my dad as he turns 70! I drew his portrait to celebrate and hang up on his wall. Here’s a quick time lapse of this fun project. (Done on an iPad with Procreate)

What started as a series of random experiments with drag and drop behavior evolved into a lite wandering into UE’s Behavior Trees. That then evolved into cloning parts of Clash Royale. Why? Not entirely sure. This is what came of it before I abandoned things. Go get that defenseless tower, minions!!

If you’ve got a stack of cardboard boxes lying around and you’re looking to make a fun project out of it, I’m going to show you how to build a simple, working pinball machine with just cardboard, rubber bands, disposable chopsticks, and glue – no electronics required!

Decide how large of a cabinet you want for your pinball machine. For me, I had a nice ~18×12″ box lying around and used part of the lid as the main playfield where the ball will roll on. On the inside walls of the box, glue some thick supporting structure so that your playfield can rest on it comfortably. You want the playfield to have about a 6° incline, but do what feels right for the ball you will be using. I bought some 3/4″ steel bearing balls and rolled them up the ramp and adjusted the placement of the supports until the fall speed felt natural to me. Don’t glue the playfield down yet, we’ll want to have easy access to its back so we can construct the hidden mechanisms for the flipper.

Sketch out a rough idea for the general size and placement of the flippers, trough, and shooter lane. Try to figure out how large your flippers need to be for your playfield keeping in mind that you’ll need adequate space between them for the ball to fall past and into the trough.

Now cut out each flipper shape onto a sheet of cardboard. We’re going to make multiple copies of this cutout to build up the flipper’s height one layer at a time. We’ll want the flipper’s height to be close to the full height of the ball – in my case, that means the flippers are 5 layers of cardboard high.

Identify where the flipper’s pivot point is for rotation and punch a hole there consistently in all of the cutouts except for one – this will be the topmost cover. Glue all of these down onto each other making sure the holes and edges are lined up. Now push a dowel/chopstick/pencil through the holes until it reaches the cover and glue it down tight. (Repeat these steps for the other flipper.)

Now let’s place the flippers on the playfield. With the chopstick end pointing down, poke a hole where you want the flippers to rotate from. Make sure the hole is large enough for the flipper to turn freely without resistence. On the backside of the playfield, we’re going to construct the mechanism that enables the button to rotate the flipper. There are three main parts to this mechanism: the button, the button holder, and the flipper externsion.

Let’s start with the flipper extension. Cut out a rectangular shape that will extend from the flipper’s pivot point down past the button’s location. Build up its height by layering multiple layers of cardboard. Punch a hole at the top and bottom of the flipper extension and then glue these layers together. Push the flipper’s protruding chopstick through the top-most holes of the flipper extension. Rotate the flippers to their default position and angle the flipper extension towards the side of the playfield leaving enough room for the button holder. Firmly glue the flipper extention to the chopstick so rotating the extension rotates the flipper 1:1. On the other end of the flipper extension, firmly glue down another chopstick.

Now construct a button with the same multi-layered cardboard approach and cut its length to best fit how far  it needs to slide in to push the flipper to its maximum rotation. Once you’ve found that sweet spot, construct a holder to constrain the button’s movement along a straight path in. I used a single piece of cardboard shaped to form a tunnel of sorts and glued the ends down.

Now securely glue down another piece of chopstick to the base of the holder. I did this by creating a stack of 5 pieces of cardboard and punched a hole for the chopstick to sit in and liberally glued it all down. Attach a rubber band from the holder to the flipper extension and create caps at the end of each chopstick with glue to prevent the rubber band from sliding off on its own. Now when the button pushes the flipper extension away, the rubber band will pull it back towards the holder and rotate to its default position. If everything works as intended, repeat this step on the other side for the second flipper. Place the playfield back onto the cabinet and cut holes into the sides of your box to sync with the button placement.

To avoid getting in the way of the flipper mechanisms behind the playfield, the shooter will be placed above. The shooter will use a similar technique of using a rubber band to return the shooter to its default position – launching the ball in the process.

Before we do that, let’s first define the walls that will usher the ball from the trough through to the shooting lane. I’ve highlighted these essential walls in blue. To build these, cut a long, single layer of cardboard (that’s at least the height of your ball) and glue it down directly to your playfield to create these walls. When the ball falls into the trough, we want it to naturally roll all the way to the right and rest against the shooter in its default position. When the shooter is pulled down, the ball should roll further to the right and be ready to be shot up through the shooter lane.

Next, construct the Stopper. Craft this to be shaped like an upside down “L”. The purpose of this piece is to be an immovable attach point for the rubber band. Glue down a piece of chopstick to hang down above the shooter lane. Make sure there’s a comfortable amount of space between the playfield and the chopstick to clear the height of the pinball. Layer on additional pieces of cardboard to the base of the stopper to increase its height if necessary. Once you’ve settled on its height, loop a rubber band around the chopstick and secure it down with a generous amount of glue.

Next, construct the shooter. Cut a rectangular shape from layers of cardboard that will be long enough to extend past the bottom of the cabinet when at rest. Punch a hole at the center top of each layer of cardboard and glue down a piece of chopstick. Loop the rubber band around and build up additional cardboard structure to house the chopstick. This top piece serves a few purposes:

1. It conceals the attach point of the rubber band.
2. It prevents the shooter from traveling higher than desired by hitting the stopper.
3. It prevents the shooter from being pulled more than desired by hitting the bottom of the cabinet wall.

With the flippers and shooters in place, you’ve got all the fundamental parts completed and it’s now time to be creative! Add some interesting obstacles and goals – construct bumpers, walls, ramps, holes or… a secret cave that activates multi-ball mode! Go nuts and have fun makin’

We’ve successfully constructed the foam helmet, so it’s now time to give it some color and finish. Here’s what you’ll need:

• Kwik Seal adhesive caulk
• Plasti Dip rubber coating (black)
• Protective Respirator
• Painter’s Tape
• Acrylic paints
• Paint brushes
• Thick paper towel or a sponge
• Optional: Airbrush

Identify the seams that you’d like to smooth out and apply some Kwik Seal to those areas. Apply water to help soften the seal. (For a more in depth explanation, see Punished Prop’s tutorial here.) Let it dry and harden. If the seams aren’t as smooth as you’d like, apply some more seal and repeat until you’re happy.

Get ready: your helmet is now going to make a dramatic transformation from janky to professional! Find a way to mount or hang your helmet so you can spray paint it with Plasti Dip. (I temporarily hot glued a piece of string to the inside of the helmet and hung it from a makeshift painting booth.) Be sure to do this in an open, well ventilated area while wearing a respirator – you don’t want to breathe this stuff in!

This will apply a thin layer of rubber to your helmet and give it a uniform surface that’s primed for paint. Plasti Dip comes in different colors so choose the color that would best work as your base color. I chose black.

Identify the main base colors and the surfaces they occupy. For the Boba Fett mask, there are 4 main colors: green (general helmet), red (visor + trim), dark grey (antenna), and yellow (striped decal). Mask off the areas you want to paint using paper and painter’s tape and then apply your paint. I wanted a very even application so I used an airbrush.

Making the masks can be really tedious but take your time with it. I ended up spending way more time fixing places where paint had seeped past the mask rather than if I had done it carefully the first time.

I ended up going over several of the same spots multiple times for different purposes. That meant recreating the mask multiple times. Once my first pass was in place, I went back over the green surfaces so that I could create subtle highlights + shadows in the greens. I ended up experimenting with mixing in some metallic acrylics into the colors as well to add a subtle sheen. I did the same for the red and dark grey sections as well. This step can take a long time, so be patient!

We’re going to darken all the crevices and give the form age and wear. (For you CG artists out there, this is sort of like applying an ambient occlusion pass.) With a large brush, quickly and liberally apply black acrylic paint to the entire surface. Be sure to get a lot of black paint in the hard to reach areas.

After 4~5 minutes before the paint is fully dry, use a thick paper towel or sponge to wipe/dab/rub off the majority of the paint on the larger surfaces, but leaving paint in the crevices and textured areas. (For a great in depth guide to this, check out Zonbi’s tutorial here.) In some areas, I accidentally rubbed the surface a little too hard and actually exposed the Plasti Dip surface, but it looked good so I went with it. Look for happy accidents.

Here’s what the before and after looks like:

The funnest part about Boba Fett’s design is that his armor is all scuffed up and battle worn. It has a lot of stories to tell. To simulate the look of metal having been hit/scratched/dragged on surfaces hard enough to chip paint, I took an old, stiff paint brush and gently dry-brushed streaks of metallic paint over the top. I kept referring to the images I had collected as well as photographs of worn armor and machinery as I painted. I also introduced some subtle hints of yellow and brown rust to help sell the fact that this has gone through a lot of adventures.

Finally, to fill the visor part of the helmet, I bought a reflective “solar face shield” from the dollar store, cut it up and glued it to the inside.

That takes us to the end of this walkthrough. I had a lot of fun stumbling around with this project for two months and I hope, with this write up, you have a better understanding of how to better go about a project like this. If you do, let me know – I’d love to see what you make and if you’ve found better ways to do it!

Now that you’ve designed your custom pattern, it’s time to use those pieces to cut up your foam and assemble your helmet. Here’s what you’ll need:

• Exercise mats (EVA foam)
• Xacto knife
• Hair Dryer or Heat Gun
• Contact Cement (ie Barge) and/or Glue Gun
• Optionally: Dremel

Take your pattern pieces and trace them onto the foam. Don’t forget to mirror the pattern over for the other side otherwise you’ll end up with just half a helmet. Mark the lineup ticks and label liberally. It will all end up being covered up later on so err on the side of clarity.

Once all the parts are traced onto foam, take your Xacto knife and carefully cut out each piece. Swift, deliberate, slices with consistent angling will get you nice clean edges without scraps of foam. Practice makes perfect.

Now comes the fun part! Take two joining pieces and put a thin layer of contact cement on both sides. Give it a minute or two to fully dry and then carefully join the two pieces. Start with one edge and work your way down to the end making sure to line up every tick mark one at a time. Hold the two pieces together for another few minutes and they will be forever joined.

Repeat this process until you’ve got the entire helmet fully assembled. For pieces that need to be shaped, apply some heat with your hair dryer/heat gun and hold the foam to the desired form for a few minutes. The foam will keep its shape when it cools.

Now that you’ve got a wearable helmet, test your fit! If it’s too tight, it means you didn’t scale up your pattern enough. Make and assemble another helmet from a larger pattern. Don’t be afraid of remaking parts! It’ll save you more time down the road to get things right at this early stage. I completely remade the cheek structures 3x because the original pattern ended up being too flat. Using a dremel, I was able to experiment and shave down new angles until I got what I was looking for.

With the base helmet complete, you can now build out shape details like the back ridges, the “ears”, and the iconic dent. Try stacking layers of foam and cutting out shapes with your Xacto knife or shaving them down with a dremel. Don’t feel limited to just using foam! I glued in a pair of disposable chopsticks for the antenna because it provided the right amount of rigidity and built in detailing. A lot of detail will come through in the painting, but at this stage, try to focus on adding new shapes that will change the silhouette and catch light/shadow in noticeable, interesting ways.

Now it’s time to add some color to this bad boy in Part 3: Paint and Surface.

We’re going to design a custom fit helmet, so the first thing we need to do is create a frame over the subject’s head to base a pattern from. Once we have a pattern, we’ll use it to cut out the foam parts to assemble back into a helmet. Let’s start with designing the pattern. Here’s what you’ll need:

• Construction Paper (anything that won’t easily tear)
• Scotch Tape
• Duct Tape
• Scissors
• Optional: PC w/Photoshop

Collect a bunch of reference images and start to plan your attack. At this stage, I’m looking at the overall shape and ignoring details like the “ears” and complexities like in the cheek. I’m noting that this the form is largely symmetrical. The helmet is slightly wider at its base and its chin in longer than the back of the head. We’ll build a frame with these notes in mind.

Cut strips of paper and tape together a frame for the mask. I started with the horizontal headband and hung four long vertical strips down from the top of the head to cover the front, left, right, and back sides of the head. I’m marking general places for where the eye slit should be, where the nose/mouth/chin sit, and where the base of the helmet should be on its front/side/back.

Trim the vertical strips and tape up some more cross strips to fill out the skeleton of the helmet. At this stage I’ve made sure to widen out the base of helmet since I noted that it’s wider there. I’ve pencilled in more detail about where the eye slits will be.

Now take strips of duct tape and give half of the frame a “skin”. We will eventually cut this skin up and flatten it out to create our pattern. We only need half because the helmet is symmetrical so we can mirror our pattern to complete the other side.

Using a permanent marker, subdivide the duct tape skin into smaller pieces. These cut lines are indicated by red below. I’ve chosen to have most of the seams follow the natural breaks in the materials. Use your permanent marker to add some smaller guide lines (purple below) to help you line things up later on when the templated piece is eventually going to be reassembled. You may want to label these pieces to indicate what is front/back, up/down, left/right. Once these pieces are cut up it may be hard to understand what’s what so mark it up for future you.

Now that you’ve got your cut lines all figured out, cut up your skin and lay it flat. For the peices that don’t lay perfectly flat, cut a slit or two until it’s able to lay perfectly flat. These pieces are going to serve as our pattern to cut foam pieces from.

If we were to use these pieces as cutout guides as they are, the mask will end up being too small because we haven’t yet taken into account the thickness of the foam. We need to scale these parts up by about 15~20% it’s current size to account for that thickness. You can do this by hand or, if you’re anal like me, you can scan them into a computer and do it in an image editing application like Photoshop where you can clean up the lines while you’re at it. To do that, I took a pictures of the various pieces against a common background and a ruler so I could scale the pictures to match. I then rearranged them to fit on two 8.5×11″ sheets of paper. Using the pen tool, I made cleaner vector lines and printed these out.

Congratulations! You’ve now got a reusable pattern. Cut up the pieces and set them aside. You’re now ready for Part 2: Construct the Form.

My 4-year-old is bonkers for all things super heroes and Star Wars so I decided to make him a Boba Fett helmet out of the stack of spare floor mats we had when he was crawling around as a baby. It was my first time making anything cosplay related and I learned a lot in the process.

There’s a lot of scattered tutorials out there for very specific outcomes but I thought it would be helpful to share a simple, high-level guide on how to approach a project like this so you know what’s involved in the larger journey before committing yourself to the details. I’ve broken this project down into three main phases:

1. Design the Pattern
2. Construct the Form
3. Paint and Surface

(Update 12/3/19: portions of this project are described under Patent US10493363B2)

I’ve hacked together a first person driving experience that uses a natural steering wheel to control an RC car. The experience is a lot like playing a Racing Kart game IRL. It’s probably easier to understand if you see it in motion. Check it out:

I got the idea for this project while watching my three-year-old son play with his radio controlled toy cars. These all use the conventional two joysticks. The left is isolated to vertical movement to control the motor and the right stick is isolated to horizontal movement to control the turning direction of the front wheels.

As a toddler, my son tends to only meaningfully control one stick at a time. It’s probably too sophisticated for him to infer that directing the car to a diagonal means he needs to press the left stick forward and combine that with the right stick’s sensitivity. What’s interesting, though, is that he has no such difficulty driving his big power wheel. Same operations but different interface. It has a natural steering wheel, a gas pedal, and a shifter to control direction. It got me thinking: what if RC car’s could be controlled by natural steering wheels too?

I quickly realized that having a more natural controller isn’t enough. Without locking my son’s orientation to the car’s, I would just be recreating the struggle I had with the arcade game Super Sprint. I could never tell if turning the wheel left was moving the avatar screen left/right/up/down. Luckily, with the rise of drone racing, I could simply mount an FPV camera and place the monitor as if it were a windshield or wear it directly on my face.

The combination of a natural steering wheel controller and visual feedback directly from the car itself makes for a really compelling experience. The perspective is really novel and the scale magnifies the intensity of speed. It can feel like travelling at 300 mph, but at the same time, everyone who has picked it up can deftly control the car within minutes. It’s a lot more approachable than a drone. Who knows, with autonomous cars on the horizon, maybe this is how the joy of driving is preserved?

I had a lot of fun making, breaking, and remaking this rig. I learned a lot about electronics in the process and it’s been really fun sharing the experience with friends, and now with you!

As a test, I decided to hack an existing piece of consumer electronic and control it with an Arduino. I took apart my son’s $10 toy RC car and used a wire to contact the battery’s positive terminal to random points on the circuit board until I isolated which circuits control the steering and motor. Once I located these circuits, I soldered wires to these points and connected them to pins on an Arduino.

My Arduino happens to be connected to a PS2 shield, so I made some slight modifications to my PS2 controller sketch to digitalWrite the appropriate pins to HIGH. Here’s the sketch:

#include "Shield_PS2.h"

PS2 ps2=PS2();
unsigned long time;
int fwPin = 8;
int bwPin = 9;

void setup() {
  ps2.init(9600, 2, 3);
  pinMode(fwPin, OUTPUT);
  pinMode(bwPin, OUTPUT);
  
  Serial.begin(9600);
  Serial.println("PS2 Shield initialized.");
}

void loop() { 
  // Button Status: 1 = not pressed, 0 = pressed
  // SQUARE
  if (ps2.getval(p_square) == 0) {
    printTime();
    Serial.println("SQUARE");
    digitalWrite(bwPin, HIGH);
  }
  else {
    digitalWrite(bwPin, LOW);
  }

  // CROSS
  if (ps2.getval(p_cross) == 0) {
    printTime();
    Serial.println("CROSS");
    digitalWrite(fwPin, HIGH);
  }
  else {
    digitalWrite(fwPin, LOW);
  }
}

void printTime () {
  time = millis();
  Serial.print("(");
  Serial.print(time);
  Serial.print(") ");
}