We created a virtual reality motion controller for the Intel Competition.
Here are the arduino files:
(This is a multi part tutorial series, you can find part 1 here: Recreating the HinterLands In Unity)
Create a prefab
In the bottom, under your assets folder, add a new folder named ‘Prefabs’. Drag your Player down to the prefab folder. This creates a Prefab of your player- which is an object you can re-use mutliple times by just dragging it out from your prefabs folder. It also lets you make changes to any object you are working on, and instantly apply it to all other instance of that object! So if you had the player automatically walking around the level, you could drag out 10 of them, and they would all behave the same way (or you could modify them slightly). It can be super helpful if you want to improve the player in one scene, and have it update in all your scenes.
Resources for Animating in Unity
The official documentation has some info on animating:
But this article is more helpful (at around the ‘Idle animation’ section):
We’ll want to start out with a walk cycle. At first it might be fine to just swing the legs back and forth, but it will look a bit ugly, and it doesn’t take that much more effort to get a slightly better looking walk cycle in.
The easiest way to find a reference for it is to just go to google images and search “walk cycle”
The first one that comes up for me is:
Which is one I’ve seen for years, and is a great one to go off for seeing both legs, arms, and the head going up and down.
You’ll want to download this image, and put it into your Assets/images folder, so we can use it as a template for making our guy walk.
(right click on it and go to save link as, and it should save it as a jpg)
Since our guy is facing the opposite direction of the walk cycle, we’ll flip our guy (flipping the image instead makes him go through the walk cycle backwards). So click on the Player Game Object, and set his X scale to -1 to flip him horizontally.
Drag the image out into your scene on top of the guy. Set the order in layer to -10 so it’s now behind the guy, so we can see him completely. Then scale it down so that their guy is roughly the height of our guy (use the 3rd/ almost standing guy as the main one to align ours with- since he’s basically standing too). Make sure if you are using the last tool (‘t’ on your keyboard) for resizing the image, that you hold down ‘shift’ when grabbing the edge, which will force it to scale with the same aspect ratio (if you scale just vertically, it will mess up the proportions of the character).
Make sure your player object is selected.
Go to window->animation and hit the create button (check carefully you selected the ‘animation’ window- it’s kind of hidden in there with 2 other ‘animators’).
Create a new folder under the assets folder, called “Animations”, and save the animation as ‘walk_cycle’.
On the left hand side you have a red ‘record’ button, normal play/forward, ect controls. Under that it should say ‘walk_cycle’- if you click on that (even though it doesn’t look like a button), you can create more clips (which we’ll do later for jumping/ crouching).
On the right hand side you have the timeline. All animation is usually done on a timeline. The way it works, you make a change- say lifting the leg a little, you record that change, move to a spot further in time, and lift the leg more, record it again. If you play that back, it will smoothly ‘tween'(to make things move smoothly from one spot to the next) between the first position and the second one. And that is the beginning of animation!
Depending on what type of animation, usually it will play back at a rate of 30 frames per second (so you could potentially create 30 frames of movement, and it will play back in 1s- or you could create 1 at time 0, and the next at time 30, and it will take 1s to play it back, and tween smoothly between the first and last position).
Lets get to work!
Animating the walk cycle
So the red line on the left hand side should be at the 0:00 spot (if not you can move it there by dragging it at the very top).
Lets hit the red circle/ record button (so that it is highlighted/ lighter behind it), then move that window out of the way, click on your characters front/ right leg, and rotate the thigh + move it until it is roughly in position of the first frame of the walk cycle behind him. Then grab the calf, the foot, and position them the same way, until the whole leg looks close to the first frame of the walk cycle behind him.
We’ll probably want to think how much time the walk cycle should take. It’s 2 steps, so lets go for 2 seconds total (at 30 frames per second, or 1 second for 30 frames, we’ll need 60 frames total to display 2s of our animation). There are 9 different frames behind him we’ll want to position everything for, so 60/9= 6.66, which we’ll round to 7. So we’ll re-position him every 7 frames to have our walk cycle last a total of 2s.
So drag the red line until you see that it is on frame 7 in the little tiny box on the left hand side. Now we’ll want to move that left/front leg to be in the rough position of the second frame in the walk cycle behind him.
When you get it to where you like it, try clicking and dragging on the top right where the numbers are, and dragging back and forth between 0:00 and 0:10. You should see the leg move smoothly between the 2 positions, and your character start coming to life!
So now that we can see how to actually get our character to start moving/ animating, we’ll want to create the entire animation. First go back to frame 0, and position your entire character to match the first frame.
* You can also flip the left arm in the X direction (changing it from -1 to 1, or 1 to -1) to make the arm joint go the correct way. Since our guy isn’t rendered from the side, you’ll have to try your best to make it look “right”.
To make it easier, you should first move your entire character down to match up with the head position of the background image. You don’t think about it, but you bob up and down significantly when walking. So if you get the body position done first, you can more easily estimate where the feet should land, and then the hands.
So first select the chest and hips (in the heirarchy click the chest, then holding down ‘ctrl’, click the hips), then move them both down to the right position (make sure you are at 0:00 on the time line too). Then position the feet (use the feet of the other character to roughly imagine where the ground should be/ the lowest point the feet should ever go). Then finally move the arms into the right position, and re-position the chest/ hips as needed, until everything looks right for the first frame.
Then move to frame 7 on the timeline, repeat, then frame 14,21,28,35, 42,49, 56 and repeat until you’ve finished all the frames! (Hint: it might be easiest to move the walk cycle frames behind your character to line it up better, just try to move only the X direction so the ground stays in the same spot- if you start moving it in a direction, hold down ‘shift’ to lock it to only move in that direction)
* Also with the arms, remember that the dark shaded one on the walk cycle sheet is the back arm, which is our guys left arm.
* Also, after you put the second frame, the animator re-scales to only show up to those frames. To see more, you can scroll over on the bottom scroll bar by hitting the right arrow, or you can zoom out by scrolling out the middle mouse button over the lower gray part (not over the timeline for some reason), or holding down the middle mouse button and dragging over the light gray area at the bottom. Not super intuitive.
WARNING: Save after every pose, and make sure you don’t save whenever unity messes up your animation. Unity animator seems exceptionally buggy. If you make a mistake and undo it, it will place your body parts in random spots, and will mess up all frames of your animation. Also, it will just randomly mess up the position of all your body parts for no reason. Whenever it does, just close Unity, and reopen your project (without saving), and it should be back to your previous save positions again. THIS IS VERY BUGGY.
NOTE: Frame 0:00 and frame 56/ the last frame in the walk cycle are the same, so you can highlight all the keys/ the diamond shapes for the first frame 0:00, hit ctrl+c to copy them, then move the red line to frame 56 and hit ctrl+v to paste them there!
It’s a long, painful process (especially with how buggy it is/ often it tries to screw up all your work), but when you’re finally done positioning all the poses, hit the play button on the animation window to see your walk cycle play!
Unity apparently doesn’t have the ability to save out your animation as a gif/ video, so you would have to use a separate program to record your animation to show it off to friends.
(NOTE: I originally did the tutorial with the walk cycle flipped- which ended with the guy walking backwards. So let me know if something doesn’t add up correctly XD)
Download the final finished Project(Only needed if you had issues getting your animation working) HERE: The HinterLandsUnityWalkCycle
Continue to Part 3: Making your character move with the arrow keys! (coming soon)
DOWNLOAD ASSETS FOR THIS TUTORIAL:
First download, install, and sign up for Unity3d free: https://store.unity.com/download?ref=personal
Open up Unity, and create a new project
Call the project whatever you like, and put it in a location on your computer where you can easily get to/ can put future Unity projects as well (Mine is c:\working_dir\Unity\TheHinterLandsUnity)
When the project opens, you will be greeted with the default layout. There are a couple of different sections to be aware of:
* Bottom middle/left is your file structure/ where you’ll put all your images/ scripts/ all your assets.
* Left center is the Hierarchy/ what is in your current level/scene (originally just the camera)
* Above that are the controls for interacting with objects- pan (move the view), move, rotate, scale, transform
* To the right is the scene view- where you will actually move/ interact with your objects
* To the right of that is the game view- what you’ll actually see in game. It’s usually best to drag that tag next to the scene tab so that you only see one at a time + the scene view will be larger/ easier to work with.
* On the far right is the inspector panel (you may have to click on the inspector tab, and the camera in the Hierarchy panel to see the same thing). This panel allows you to edit your game objects, or add more to them (like physics, new scripts, even networking)
* On the top, you have a play button to actually start your game, to play it and to test it.
Navigating the Scene view
(Learn more on the official docs: https://docs.unity3d.com/Manual/SceneViewNavigation.html)
In the scene view, to navigate use the buttons:
* Hold down middle mouse button to pan the view
* Roll the middle mouse button to zoom in /out
* If you click on the ‘2D’ icon on the top, it will switch to the 3d view, and you can use the right mouse button held down to rotate(but make sure you switch back to 2d)
* You can select stuff like normal just clicking on it with the left mouse button (try selecting the camera if you hadn’t)
Saving the scene
We should probably save at this point. Go to file->save scenes->right click and make a new folder names ‘Scenes’, click on it to go in, and name the scene ‘character_setup’.
Adding assets/ images
Attached are the images needed to build the Hinterlands Character (just doing the male version for now). Download it, create a new folder in the bottom panel (right click->create->Folder), name a folder ‘Images’, then create a new folder in that one called ‘guy’. Then drag all the images you downloaded into that folder.
You might notice that I only have images for one side of the body. That’s because humans are symmetrical, and it saves texture memory to re-use whatever you can. So we can just flip the images to use them for the other side of the character.
Now we’ll create a new game object to control the positioning of all our images. Right click on the top left (Hierarchy) panel, and click ‘Create Empty”. This creates a new game object (named “GameObject”) in our scene/ hierarchy panel. If you click on it in the hierarchy panel, you’ll see it just has a ‘Transform’ on it, which is what every basic game object has- which is just the position rotation and scale of the object.
While you have this game object selected, in the Inspector panel (to left), change the x, y and z values all to 0.
Click the ‘GameObject’ text in the hierarchy panel once (wait for 2s) and rename the GameObject to ‘Player’ (you can also do it after clicking the game object, and changing it in the top right panel/ inspector.
Next we’ll put all our images into the scene under our ‘Player’ game object. On the bottom in the Project panel, click on the first image, drag it on the ‘Player’ text on the Hierarchy panel, and repeat for all the images (you can also zoom in/ out on how many images you see in the bottom panel using the slider on the bottom right of the panel, so you can see all images at once if your screen is small).
Once you’ve dragged in all the images, double click on the first on in the hierarchy panel to zoom in on it. You’ll notice in the inspector panel that it has 2 components added on to it- the ‘Transform’ component again (with position, rotation, scale), but also a sprite renderer, which allows the image to be rendered in game.
So now we’ll want to move all the images to their proper position. We’ll start with the head. Make sure you have the move tool selected (second icon on the top left with the 4 arrows, or just hit the ‘w’ key- ‘q’ through ‘t’ represent all those tools). Click on the head in the hierarchy panel, then move the head up by clicking on the green arrow on the head and dragging up until the heads y value position is around 0.35 in the inspector panel (clicking on the yellow arrow makes it so it will only move it up/down, not allow it to move left/right).
Next we’ll move the torso/chest up. Click on the chest, then this time click on the little blue box at the base of the green and red arrows to be able to move the chest under the head (this allows you to move it right and left too).
You might notice the chest/ neck is going in front of the head, so you can’t tell exactly where it should be placed. We’ll have to change this so they have the proper draw sorting order.
Fixing Draw Sorting Order
Let’s put the head over the neck, so it gets drawn first/ on top of the neck. Click on the head, and in the inspector panel, change the ‘order in layer’ to 1 (since the default is 0, this will put it one over the body).
You should see the head being drawn on top of the chest. Now keep moving the chest till it looks right.
Then continue for all the other body parts, with the body parts all on the right side of the body for now (we’ll duplicate them to go on the left side afterwards).
The order I went was: head->chest->upper arm->hand->hips->thigh->calf->foot.
Once you have them all positioned, you’ll want to fix all of their draw orders. The values you’ll want to use:
Upper arm: 3
Lower Arm: 2 (has to be higher than the head)
Lets also organize the body parts in the Hierarchy to make it easier to move body parts (so say if we move the upper arm, we’d want the lower arm and the hand to follow it).
So in the hierarchy, drag the head , upper arm and head onto the chest (which should then show them “under”/ indented under the chest, which means they are now children of it).
Then drag the lower arm onto the upper arm, and the hand on the lower arm.
Then drag the thigh on the hips, the calf on the thigh, and the foot on calf.
So the hierarchy should look like the following screenshot:
We did it this way because we can rotate the upper arm, and it will rotate the whole arm. We can rotate the thigh to rotate the whole leg, or rotate the chest to rotate the whole upper body.
Next we’ll want to copy all the right side body parts over to the left.
Right click on the upper arm, and click ‘duplicate’. In the Inspector panel, in the transform area, change the X scale from ‘1’ to ‘-1’ to flip the arm on the X axis (to reverse it for the other side of the body).
Rename everything in the duplicate to be whatever body part it is with ‘_L’ at the end (so ‘arm_upper_L’, ‘arm_lower_L’, ‘hand_L’). Then select the left upper arm again, and move it using the red X direction arrow to the right position on the other side of the body.
Since this arm should be behind the body, we’ll need to re-position the draw order to be behind the chest to make it look right. If you click on the chest, its draw order is 0, so the maximum we’ll want to use is -1. But since there are 3 parts, and they should be layered correctly, we’ll use:
Next we’ll do the legs. Right click on the thigh in the hierarchy and click duplicate again. Rename it and it’s children: ‘thigh_L’, ‘calf_L’, ‘foot_L’. Click on the thigh_L, and in the inspector panel, in the transform component area, set the X scale from ‘1’ to ‘-1’ to flip the thigh again. Use the red X arrow to move the thigh and its children into the right spot.
We’ll have to modify the draw order again to get it looking right. The hip was set to -1, so all the parts will have to be lower than that to be behind the hip (as well as behind the other leg). Set the following for each parts draw order:
If you’re wondering how I picked those values, it’s that the right side of the body is in front of the left in this perspective- so they have to be layered on top. Some of the joints I made with the intention of layering them on top of each other (that’s why they have gaps in the black outline). Lastly you can move limbs to make sure they look correctly- the right arm should be in front of everything, the right leg should be in front of everything except the right arm. The left arm should be behind everything except the left leg (which should be below everything).
Now we should have our guy completely in and the drawing order + hierarchy all correct for being able to animate our guy!
So lets get to making a walk cycle.
The Free PC version is ready for download. Let me know when you want to see the paid!
Waiting for approval through Amazon for their PC app store.
Steam Greenlight isn’t looking positive – only about 25% “yes” votes, no one is apparently interested in further development on the game on PC 🙁
Description in case you don’t know:
The HinterLands is a multiplayer 2d mining sandbox game, and was released early in alpha to encourage people to contribute to development.
It has grown a ton, and keeps growing thanks to player feedback! Contribute ideas and feedback, and help shape the future of the game.
Mine the world for resources, build great structures, harvest plants, trees and mobs, all with friends or random players!
•• Multiplayer Modes ••
• Play multiplayer over wifi/LAN (with mobile devices or desktops)
• Join a PC server and play with tons of people (both on desktop and mobile devices)
• PvP recently added- fight against friends or random players!
•• Features ••
• Fight mobs with fast combo attacks, or slow strong attacks, blocking, or turn off hostile mobs, go into creative mode, it’s all your choice!
• Build structures using tons of blocks and items!
• Farm mobs for resources, or destroy them for food to regain health, and stop hunger
• Harvest trees and plants for food, potions, or seeds to replant and grow your own forests
•• Features Coming Soon ••
• Redesigned UI: easier inventory system, more advanced item, armor and weapon crafting system, equippable armor and clothes, and quests
• Bosses, more mobs, and more biomes
•• Planned features ••
• Player vs. Player: Free for all, capture the flag, team oriented with different classes, tower defense with creeps and towers
• NPC’s: Characters to give you quests, buy and trade items
• Pets: Animals to join you on quests and in combat
• Level editor: Submit levels for public servers!
• Character leveling and skills: customize your character for your playstyle. Create a invincible tank, a stealthy rogue, or a powerful mage
• Farming: Domesticate mobs, take care of them in your barn and breed them! Grow crops for creating potions, money or aid in exploring
• UI system for advanced custom crafting of weapons, armor and vehicles. Quality based on character crafting skill, with adding gems and enhancements
• Polygon based worlds. Mini planets, solar systems, and space travel
•• Instructions ••
• Customize and create your player and world
• Play single player, wifi game, or join a public server
• Mine dirt, stone, ect with the pickaxe. Chop trees and items with the axe. Use the hammer to break down backgrounds or items
• Keys: W(move left), A or Space(jump/ double jump), S(move down, duck, go prone, or slide), D(move right), and Shift to walk. Click to mine, place or attack.
• Use the fast attack button to combo attacks on mobs(Left Click). Use the strong attack for higher damage(Right Click). Use the shield to become invincible(Middle mouse button or ‘E’)
• Mouse scroll to zoom in / out of the world; open your inventory and scroll to increase / decrease button size. Move items by holding them down for 1s, or split stacks by holding down longer
• Build amazing structures, upgrade your tools, and share on our facebook page! http://goo.gl/vsclYF
• More instructions on the wiki: http://goo.gl/UZcn2N
•• Bugs ••
• World format: needs to be changed, to optimize network, allow boss areas/ scripting, and allow more biomes+bigger worlds
• Lighting system was too slow, so has been cut down and needs to be redone
• Multiplayer movement needs to be changed to look smoother
The game is still in alpha, because there is so much still that we want to add.
There are only 2 of us working on it, but we appreciate everyone who plays the game, helps contribute by finding bugs, adding ideas, suggestions and feedback
Join the forums: http://goo.gl/Zxe3hb
Please leave feedback, have friends play with you, and be a part of helping an indie game grow! Let us know what you want added first!
•• Free Version vs Paid ••
We want to have everyone be able to play the game, both to try it out, and for people who can’t invest in its development yet. The Paid version has a much bigger inventory (80 vs. 20), and each character also starts with a “Backers Reward”, which allows you to teleport to and from your spawn point. We hope you help fund development, but understand if you can’t.
Finally getting around to re-doing the website because linode sends a lot of disk io overload problems….
In the mean time, contribute on the forum at http://www.ackmi.com/forum