Personal Website Made With Armory

Showcase
#1

Hello friends!
I’m making my personal web page entirely in 3D, using Armory:

◢◤◢◤◢◤ https://rogper.github.io ◢◤◢◤◢◤

(seems to only work on Desktop so far, Firefox recommended)

rogperIO-Armory
rogperIO-Armory3840×2065 1.13 MB

I can only imagine that I’ll have more doubts than Superman on the cristal cave, therefore I’ll be charing here and documenting all my progress on this new quest! :slight_smile:

So far only basic movement with Keyboard (WASD) and mouse (click and old to the direction you want) are up. Eventually, this will feature full character motion, selectable characters, idle animations, and of course “Galery”, “Projects”, “Contact”, and “Clients” displaying on the cube’s locations.

Best regards
Rogério

5 Likes
#2

Awesome!!
I never would have thought of using it this way!

I’m interested about the page transition method.

1 Like
#3

Thanks, @WLv0!

I’ve actually done my first 3D web page in 2008, using Blender Game Engine (which couldn’t export for the web… at least not as easy as Armory HTML5) for my project “Orion Tear”. I later converted it to a presentation I gave in a Blender meeting.

“Page transition method”!? :thinking: I’m not sure if I understand… can you explain a bit more?
Like levels you mean?

#4

Captura de ecrã de 2021-11-13 12-59-16
Captura de ecrã de 2021-11-13 12-59-163840×2160 621 KB

https://rogper.github.io
Hello friends!
I’ve added:

  • Basic collisions;
  • A “fence” to restrict movement;
  • A test favicon that replaces the Armory default bird.
  • Visible statics to help reviewing performance.

With the dynamics came a few issues:

  • The camera is now parented to the cube that has the movement logic… this doesn’t make the cut because I would like the camera to be parented only to the Location and not the Rotations :thinking: It now tilts when the characters collide, I don’t fancy that … easy to do in Blender with a child constraint (for example)… but I’m clueless on how to do it in Armory.
  • The physics makes the character rotate when it collides… which is not terrible… may work as soon I can make the camera not follow the rotations.
  • If I force it the character tumbles to the ground… I don’t want that too… I need to remove rotations from the physics completely…
  • One more I’ve just found, If the camera crosses the “fence” it no longer allows to move by clicking… this because the clicking sensors get behind the “fence”.
2 Likes
#5

Hi!

Looks cool…

This is quite simple. Heres how:

  1. Unparent the camera for the character
  2. Add an Empty at the location of the camera and then make it a child to the player
  3. use this setup to copy location only
    image

Set the “Angular Factor” of the player physics to 0
image

To fix this set the physics collision collection of the “Player Sensor Planes” to both 1 and 2. Like so
image

And in the logic node setup, use mask = 2:
image

2 Likes
#6

Thank you so much @QuantumCoderQC
I’m now leaving home, but I’ll try all of these yet today and will report! :smiley:
Until soon!
Rogério

1 Like
#7

@QuantumCoderQC :smiley:
100% success implementing all your help! Real thanks!
List of modifications:

  • Added all the QuantumCoderQC above sugestions;
  • Changed the collision shape to “capsule” (as it seems to feel more natural).

It’s already updated:
https://rogper.github.io

It’s now looking stable enough for me to make and add the walking animation :slight_smile:
Will just make 4 actions, walk left, right, up, and down and will trigger them simultaneously with the movement. I’ll dedicate the next Saturday to that.

Captura de ecrã de 2021-11-13 17-16-49
Captura de ecrã de 2021-11-13 17-16-493840×2160 720 KB
Captura de ecrã de 2021-11-13 17-18-20
Captura de ecrã de 2021-11-13 17-18-203840×2160 1.35 MB

Until the next adventure!
Best regards
Rogério

3 Likes
#8

If I was misunderstand :pensive:
I was imagining the pages changing like a web site…
Don’t worry about it.

I’m looking forward to more.
Thank you!

1 Like
#9

@WLv0 Yeah, it won’t work with page changing… it will work more like a normal game.
You go to a cube/hotspot (later to be replaced by something more pretty than a cube) and by clicking on it, or pressing space, it will open a new “page” but always in 3D space and in-game.

#10

I’m really waiting for the Grease Pencil to get full implementation, because then we could maybe use Armory as a true replacement for Flash. Creating an all-Armory website would then be as possible as an all-Flash website.
But Armory for web seems like a cool thing with a lot of potential.

1 Like
#11

Thanks @OkyDooky!
…And perhaps create entire menus and UI’s with Grease Pencil too, like for the RPG’s and Beat them Up life bars, that would be cool :slight_smile:

1 Like
#12

I have one doubt.

https://rogper.github.io
Now the character just moves (more like pans) Left, Up, Right, Down…

  • Is it possible for it to rotate in the direction it walks!?

My plan to solve this would be to make 4 walk cycles animations, one with it rotating to each side, but, if we can do it with the nodes, I could just make one walk cycle animation for all directions.

I have tried to give it some rotation force, but then the character just keeps spinning :laughing: :sweat_smile: which is a good Super Mario World kind of move, but not the desired for this case.

I hope this Saturday I can continue the work, the last one I’ve been sick with a normal but nasty flu!

#13
  • Is it possible for it to rotate in the direction it walks!?

Yes… But a direction vector should be normalized.

Here is some example:
look_to_vector_example.blend (965.2 KB)

You can manipulate the direction vector to make the object move relatively to where the camera is facing using the Vector to Orientation node and a horizontal axis object

2 Likes
#14

Hi,

You don’t need to calculate the direction in which you move, since you are the one inputting the movement directions via WSAD or click inputs. So, you just need to turn according to inputs.

So, for each “turn”, you can use the “Tween Rotation” nodes and rotate your character when any of WSAD keys are pressed.

For example Keyboard[Started, D] -> Tween Rotation-> Set Object Rotation. This would gradually rotate your player when D is pressed. Then you can play your walk animations and move the player.

1 Like
#15

Thank you very much @knowledgenude and @QuantumCoderQC!

(This was edited after testing the demo file :slight_smile: )
Tomorrow I’ll implement both methods before making a decision!
Just tried the @knowledgenude demo and works perfectly! Awesome actually, as even works with diagonals and such!

I’ll report and show the results here tomorrow!
Until then!

1 Like
#16

https://rogper.github.io
Good morning friends!
Well, I actually had partial success.
I used the simplest way possible described by @QuantumCoderQC, because:

  • Seems to fit better in my previous configuration.
  • I like the more Japanese RPG feeling it has.

The updates:

  • The character now turns (hard turns actually) in the direction it walks;
  • Both keyboard and mouse click work.
    TweenRotation-issue
    TweenRotation-issue3840×2160 659 KB

    The thing is :thinking: I most surely made it all wrong because the Tween Rotation seems to don’t do anything at all. My guess is that it should smooth the turns, correct? As such I have a few questions:
  • What the “Tween Rotation” node is actually supposed to do!?
  • I had a really hard time using “Degrees” values to turn it in the correct direction. It would always turn a little bit off, when to the sides, and when turning to the back (180º) would just result in a 90º turn to the left. Using Quaternion rotation values apparently solved it completely! Why is that happening!?
    Captura de ecrã de 2021-12-04 11-32-27
    Captura de ecrã de 2021-12-04 11-32-273840×2160 1.52 MB

Best regards
Rogério

1 Like
#17

I’m starting to understand @knowledgenude example! :slight_smile:

I was able to implement it too :slight_smile:

I like the more RPG look better, but this one does allow for smooth turns :smiley: and for a natural movement.

The fast hack I made:

Captura de ecrã de 2021-12-04 14-36-23
Captura de ecrã de 2021-12-04 14-36-233840×2160 893 KB

1 Like
#18

A friend of my confirmed me that it works on his cell phone too :slight_smile:
…on mine it’s all black… I did use some things that aren’t on the default “mobile” render path… I need to try the exact default settings.

#19

That was my first thought, as well! You could even use it to produce effects, since it’s scalable, programmable, and can have effects applied to it and even use textures. Plus, this way we can have a greater range of 2D games. Could even have anime cinematics that would all be done in-engine.
One main benefit to using Grease Pencil for UI is it is basically scalable vector graphics+ and would be resolution and aspect ratio-independent.

1 Like
#20

Both the examples looks cool.

as for the rotation tween, it interpolates rotation between two given rotations with time. at each interpolation step, tick output is called. You may read more about these nodes in the documentation at armory wiki page.

For better result in case of tween node, connect a set object rotation node to the tick output of the tween node. and connect rotation output of the tween node to the rotation input of set object rotation node. Now the object should turn smoothly.

But I think @ knowledgenude’s method looks quite good on the character.

1 Like