Simple Demo Mini Tutorial for "Newbies" - Player moving (MoveWithCollisions)

Tutorials and tips
, , ,
1

Good afternoon Group!

Here I leave the download link of a simple project.

LIVE DEMO
https://www.viseni.com/character_navigation/

SOURCE CODE DOWNLOAD LINK – UPDATED TO GITHUB

Basically it is to learn how to use a navigation system of an animated character using the keyboard or virtual joysticks with MoveWithCollisions.

The character is designed using AssetForge, for those of you who don’t know it and like the Low Poly world, I definitely recommend this tool.

Later I have cleaned the mesh generated in 3DsMax.

For the Rigging I used AccuRig from Reallusion, also if you do not know it it’s highly recommended and FREE.

https://actorcore.reallusion.com/auto-rig

Once the Rigging is done I’ve exported it in Unity format and I’ve sent it to Mixamo to get some animations.
In this case I use only 4 animations (Idle, Walk, Run, RunBack), but you already know the potential that Mixamo has.

Here are two methods to use the animations:

  • Import the Base Mesh and import the animations independently in BabylonJS, after imported assign them to the base mesh skeleton.
  • Import the animations in Blender, mix them using Nonlinear Animation and export the model with the different states of animation.

In this case, I’ve used the second method since it is the simplest and did not require reusing the animations on other characters. For example, if you have some models in your project that will use the same animations is recommended to work with the first method because it´s more efficient.

I´ve passed the model exported from Blender in GLB to Babylon Sandbox to check that everything is correct and modify some parameters of the materials.
I like to use the Babylon Sandbox for the materials since it’s totally faithful to the result.

Again I have exported it in GLB format from Sandbox and imported it in

With this online tool I like to optimize the model to the maximum, using MeshOpt compression in Hight I have reduced from 800Kb to 387Kb and it’s super-easy to use.

I share the rest in the code, It´s clear and lightly documented, for those who want to learn how to move a character using MoveWithCollisions.
You´ve a main.js where is the main code and a controller.js to define the player´s movement

We already know that the most accurate method is using physics, but in many cases for certain apps or mini-games this method is more than enough.

Hope you enjoy it and have a nice weekend people!

11 Likes
2

Reallusion is nice. Im not sure how they are going to make any money though, since their animations cost like 2 dollars each. cant u just buy them all on a mannequin and retarget them all? lol.

Btw did u see the new unreal stuff? Its so good for being free. They give u a free cloud workspace to use character creator in your browser (its basically just like unreal character creator pixel streamed) and they have an ios app you can just stream to the character and supports retargeting. Ios app is called live face link

3

Hi @jeremy-coleman!

Hello

Indeed, Reallusion has a difficult handicap in its business objectives, considering that there’re more and more free or affordable options to work on character animation.

You can use a base character and use all the animations you have on your account.

Even for this mini-tutorial I have decided to use AccuRig since it’s free and offers many options to make a fairly correct Rigging with the possibility of exporting to any format.

In my case I have many purchased packs and I usually work with CC4 and iClone.
This mini-demo for example i’m using a CC4 Character and iClone Animations:
https://viseni.com/cartoonnav/

Also I keep in touch with the Reallusion Marketing team since I have promoted some of their tools through my YouTube channel, in a meeting they told me that their objective was to interconnect all the tools and offer an easy and efficient workflow and I think they’re doing a great work.

The subject of Unreal is curious, a few years ago with the implementation of Datasmith they wanted to create the paid Unreal Studio version and finally they left it free.

Without a doubt, Unreal it is the Pandora’s box of creation (Games, apps, movies, commercials, product visualization, VR, AR…)

I’ve worked on a few projects with Metahuman and Live Face. It’s still a bit cumbersome, but in version 5.2 they’re going to make the workflow a lot easier.

4

i just thought all art workflows are cumbersome, lol, but i am a total noob in that department.

did u do it through the browser version launchable here? (i thought the browser part was new but idk) https://metahuman.unrealengine.com/

btw that kenny app looks cool, i think il get it. would you recommend the lifetime upgrade one?

5

Indeed, with Metahuman you work using the browser, once the character is designed you import it into Unreal from your assets

AssetForge is a fun app to work in the lowPoly world and at a ridiculous price
Modeling in general I usually work with 3DsMax and the truth is that for lowPoly I have always wanted to use simpler tools based on blocks

6

This is way too cute !!! @PirateJC we need this in the doc ???

7

do you use blockbench?
just searched sketchfab for blockbench, this was one of the first results:

1 Like
8

Wow!!!
I didn’t know this tool
Let’s try it :raised_hands::raised_hands::raised_hands:

Thanks sir

1 Like
9

@DRLeria super cute! Love how it’s shaping up. Can’t wait to see more progress as it develops! Keep us posted!

1 Like
10

Thanks like always Mr. Pirate :vulcan_salute: :vulcan_salute: :vulcan_salute:

11

– UPDATE –

2 Likes
12

I really like the effect of smoking when the character is running.

1 Like
13

Thanks @Dad72!!

Still learning and sharing my BJS experiences :smile:

1 Like
14

You are right. We learn more every day. Otherwise life would be less fun if we had nothing more to learn.

1 Like
15

– UPDATE –

After several tests and thinking about it, I have the movement of the Player working more or less well with jumps and recognizing ramps and stairs.

This is one of those exercises on how to do things the wrong way :joy:, although it helps you to rack your head and look for solutions.

It´s a recurring old-topic, when we don’t use physics working with MoveWithCollisions we have to simulate the character’s movements, gravity and how he acts in each case (ramps, stairs…)

The result is correct and I have met my goal, although the movement could be further refined, now the idea is to do the same with physics and compare the results

Also for those who want to play, here I leave the code on GitHub:

– LIVE DEMO –

https://viseni.com/character_navigation/

– STILL UPDATING :smile: –

i´ve decided to clean a bit the code and avoid using intersectsMesh for ramps and stairs detection.

Now using two angled RayCast from the Player I can check if the player is close to a “Scalable” Mesh, in that case I add a touch of Jump helping the player moving on elevated areas.

Also it helps to correct the gravity when the player falls from a platform.

IMG_9195
IMG_91951170×1068 298 KB

3 Likes
16

– UPDATE –

  • Revised Controller code.
  • Added support for running on terrain with Heightmaps.
  • Mini Bounce after jumping.
  • Added incremental speed on keyboard controller
  • Check DeltaTime movement functions to have consistency at different framerates.
  • Added on window Focus / Blur to resume / stop simulations.
3 Likes