DEV Community: Minty Crisp

Minty's A-Frame Tips & Tricks : Parent Child Relationship

Minty Crisp — Sat, 16 Dec 2023 08:32:31 +0000

Hello, my name is Minty Crisp. I am a Web XR developer with a speciality in A-Frame. This is my 2nd post in the series Minty's A-Frame Tips & Tricks where I will share hopefully unique and informative ways of using A-Frame that I have learned on my journey so far.

Check out my portfolio @ MintyCrisp.com to see more of my projects, socials, links and contact info.

If you enjoyed this content or any of my other work, please consider sharing or sponsoring me, so that I may be able to deliver better content more often. You can support me on Ko-fi

And if you are in need of an A-Frame Developer, Debugger or Tutor, I am available. Thank you!

View, follow along & remix these examples on Glitch. Examples start from the far left and move to the right with each subsequent addition. Use your mouse to rotate the view and WASD keys to move the player controller.

The concept of the Parent Child Relationships is pretty basic and is well explained in the A-Frame doc's here -> Building a Basic Scene : Parent and Child Transforms. Essentially, any entity that you attach(a Child) to another(the Parent) will inherit the Position, Rotation and Scale of that Parent as well as any additional Parent's it may have up the chain. This inheritance is constant, meaning any changes to the Parent will update to all the Children.

While this feature doesn't sound all that unique, you can actually accomplish some interesting things with a 3D scene utilizing this relationship. Let's quickly go over some basic examples for each Position, Rotation and Scale before we get to some fun ways we can use it for. Once you understand the logic for one attribute, the rest come easy. This makes it really easy to build complex shapes that stay together whenever moving, but still has access to their own Local settings for dynamic adjustments.

Let's start with Position. The Position's relationship is additive, meaning the Position of the Parent is added to the Child. The Child's Position is it's Local coordinates, while the total (Parent + Child) is it's World coordinates aka where it actually is in scene and not just in reference to it's Parent.

Here we have a Parent entity at the World Position of (-3, 1, -3) along with a single Child at Local Position (0, 1, -1). This means that in comparison to the Parent's Position, the Child will be an extra +1 on the Y axis and -1 on the Z axis. You can see this in action with the Child purple cube being above and behind it's Parent blue cube. So technically, the Child has the World coordinates for it at (-3, 2, -4). You will also see the constant inheritance of the Position in action as we animate the Position of the Parent which moves the Child along with it.

Blue/Purple Cube Position

<!-- Basic Parent Child Position -->
<a-entity
id='parentTest0'
position="-3 1 -3" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:purple"

animation__test0="property: object3D.position.y; from: 1; to: 1.5; dur: 3000; delay: 0; loop: true; dir: alternate; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='childTest0'
position="0 1 -1" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:blue"
></a-entity>
</a-entity>

Next we have Rotation. Rotation is also addittive, so any Parent Rotation is added to it's Children. With the Parent's starting Rotation of (45, 0, 0) and the Child's Rotation of (0, 45, 0), the Child is actually starting at the Rotation of (45, 45, 0). With the Parent animating it's own Y axis, you will see the Child's Rotation be continually updated.

Red/Yellow Cube Rotation

<!-- Basic Parent Child Rotation -->
<a-entity
id='parentTest1'
position="-1.5 1 -3"
rotation="45 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:red"

animation__test0="property: object3D.rotation.y; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='childTest1'
position="0 1 0"
rotation="0 45 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:yellow"
></a-entity>
</a-entity>

And finally we have Scale. Scale is multiplicative, so the Child's Scale is multiplied by the Parent's Scale. In this example, our Parent's Scale is starting at (1, 1.5, 1) with our Child at a Local Scale of (1, 2, 1). Which means that the Child has a World Scale of (1, 3, 1). With this specific example of Scale inheritance and both entities being the same height of 1 meter, our Child becomes 3 meters tall instead of just 2 meters because it is multiplied by the Parent's additional Scale (1.5 x 2 = 3). With the animation playing you see the constant inheritance in play as well adjusting the Child's total height.

Green/Orange Cube Scale

<!-- Basic Parent Child Scale -->
<a-entity
id='parentTest2'
position="0 1 -3"
scale='1 1.5 1'
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:green"

animation__test0="property: object3D.scale.y; from: 1.5; to: 2; dur: 3000; delay: 0; loop: true; dir: alternate; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='childTest2'
position="0 0.5 -1"
scale='1 2 1'
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:orange"
></a-entity>
</a-entity>

This all works pretty straight forward when you have a single complex shape composed of many smaller entites. As for example, think of building a car comprised of a rectangle cube frame Parent and 4 cylinder tire Children. When you move the car's frame, you want to keep the tires in the same Position related to the frame. When you turn the car, you want to Rotate the tires in addition to to their normal turning controls. Same with Scale when you want to transform this car into a hot wheel or monster truck.

Advanced Inheritance

You can play with these inheritance rules a few different ways for more interesting results such as updating both the Parent and Child dynamically, having a long chain of Parents as well as having using the Parent as a Null controller.

Let's check out an example of updating both the Parent and Child's inherited properties at the same time. In this example we are rotating both the Parent and Child's X axis exactly the same from 0 to 360 repeating, but since the Child inherits the Parent's Rotation it rotates around a Rotation. Akin to a planetary body.

Red/Green Cube Rotation

<!-- Parent Child Simultaneous Updates -->
<a-entity
id='parentTest3'
position="1.5 1 -3"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:red"

animation__test0="property: object3D.rotation.x; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='childTest3'
position="0 1.5 0"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:green"

animation__test0="property: object3D.rotation.x; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
></a-entity>
</a-entity>

Next let's see the same example, but with a longer Parent chain all doing the same Rotation animation. Now we are rotating around a Rotation, which is itself is rotating. Tongue twister alert!

Red/Green/Blue Cube Rotation

<!-- Parent Child Chain -->
<a-entity
id='parentTest4'
position="3 1 -3"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:red"

animation__test0="property: object3D.rotation.x; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='parentChildTest4'
position="0 1.5 0"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:green"

animation__test0="property: object3D.rotation.x; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='childTest4'
position="0 1.5 0"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:blue"

animation__test0="property: object3D.rotation.x; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
></a-entity>
</a-entity></a-entity>

And 1 more of the same concept, but let's try animating a different axis on each entity.

Red/Green/Blue Cube Rotation 2

<!-- Parent Child Chain 2 -->
<a-entity
id='parentTest5'
position="5 1 -3"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:red"

animation__test0="property: object3D.rotation.x; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='parentChildTest5'
position="0 1.5 0"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:green"

animation__test0="property: object3D.rotation.y; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
>
<a-entity
id='childTest5'
position="0 1.5 0"
rotation="0 0 0"
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:blue"

animation__test0="property: object3D.rotation.z; from: 0; to: 360; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
></a-entity>
</a-entity></a-entity>

Null Controller

All of the previous examples help illustrate how each layer acts from Parent downward to each Child ending with the final Child being animated via everything above it. Which brings me to my final twist on the Parent & Child relationship. That would be making a Null Controller.

What is a Null Controller? It is an invisible Parent which grants the same power of inheritance to it's Children. This can be used a bunch of ways to better control your entites and make them act uniquely. Can be used as a Rig, Offset, Layouts, etc...

Everyone of the previous examples showcases the features for a Rig, Offset and Layout, except with a Null Controller Rig, they wouldn't have any geometry. But they are good visualizations for what it is doing in relationship to their children. I made an exact copy of each example for which I converted all Parents to a Null Controller by removing their geometry and material. To help showcase these updated examples without having to alter each individual entity's Position, I added them all to a single Null Controller rig which allowed me to move/rotate the entire set off to the right to not conflict with the base examples.

<!-- Null Controller Examples -->
<a-entity
id='allNull'
position="3 0 3" 
rotation="0 -90 0" 
>

<!-- All Examples as Null Controllers -->

</a-entity>

Rig

Using it as a Rig allows you to control the entire set of entities in a unified manner. So in our car example idea with a Parent frame and 4 Child tires, the Parent with a frame geometry will work okay as a Rig, but if we parent all 5 of them under a unified Null Controller, then we can still have them all move in tandum while being able to update the frame seperately without affecting the tires. So if we want to simulate the minor flucuations of the car's shocks up and down which moves independant of the tires position or if the car is actually a tank and needs to rotate to aim, it can do so without actually turning the vehicle's chasis.

Offset (Anchor Point)

Using it for Offsets allows you to adjust the natural Anchor Point of the Child object. Anchor Points for built in primitives are set to the center of it's volume and are used as the starting point to Position the object, Rotate the object and Scale the object. Having a Null Controller Offset allows you to move this Anchor Point anywhere as you would be able to in a 3D modeling program.

So when you spawn a cube that is 1 meter wide x 1 meter tall x 1 meter deep at the Position (0, 0, 0), the cube's volume will extend from -0.5 to 0.5 in each direction. Which means if your floor is set to 0, it will clip through and you will only see the top half. If you wanted the cube to sit on the floor, normally you would need to set the Y Position to 0.5 aka half of the object's height of 1. You can avoid this by having a Parent Null Controller which is set to the natural (0, 0, 0) Position and have the Child be the Offset Position of (0, 0.5, 0).

When you spin a cube that is 1x1x1, it will rotate from center point of (0.5, 0.5, 0.5). If you wanted to rotate the object like a pendulum or a moon, then you need to offset that Anchor Point of the Child and rotate the Parent Null Controller.

Same thing when you Scale a cube, it will Scale outwards in all directions from the center. But what if you wanted it grow 1 direction such as a flat cube that grows into a pillar at floor level. This can be done by Offseting the Anchor Point with a Null Controller and animating the Null Controller Scale.

Layouts

Using it for Layouts lets you make easy circle, sphere, grids, etc... without extra math. Like if you want to have a set of image frames surrounding the user 360 degrees aligned with the floor. You would build the previous pendulum/moon example which extends the Anchor Point outwards and when your rotate the Parent Null Controller, it will move in a perfect circle around the user. You could have a bunch of Null Controller w/ Frame objects each with their own rotation to surround the user completely which all face the center.

Things can get complicated fast as you expand your entities to hold more, but grants you the power to control each object as you see fit. There is a lot that can be done with the power of the Parent and Child Relationship.

One extra tidbit to note is that when you are dealing with the ability to click on a Child, that click will by default bubble upwards through each of the Parents. This can cause issues if not managed correctly, so if you are interested in making an interactive multi-entity element, learn more about the Event Loop. There is a good overview here -> An Interactive Guide to JavaScript Events.

That's it for this edition of Minty's A-Frame Tips & Tricks : Parent Child Relationship.

If you would like to see more of my projects or get in contact with me, check out my portfolio @ MintyCrisp.com.

And if you enjoyed this content or any of my other work, please consider sharing or sponsoring me, so that I may be able to deliver better content more often. You can support me on Ko-fi

Thank you for reading!

Minty's A-Frame Tips & Tricks : Looping Animation Timeline

Minty Crisp — Wed, 06 Dec 2023 10:07:13 +0000

Hello, my name is Minty Crisp. I am a Web XR developer with a speciality in A-Frame. This is the 1st post in a series I am calling Minty's A-Frame Tips & Tricks where I will share hopefully unique and informative ways of using A-Frame that I have learned on my journey so far.

Check out my portfolio @ MintyCrisp.com to see more of my projects, socials, links and contact info.

If you enjoyed this content or any of my other work, please consider sharing or sponsoring me, so that I may be able to deliver better content more often. You can support me on Ko-fi

And if you are in need of an A-Frame Developer, Debugger or Tutor, I am available.

View, follow along & remix these examples on Glitch . Examples start from the far left and move to the right with each subsequent addition. Use your mouse to rotate the view and WASD keys to move the player controller.

Animating in A-Frame is very straight forward. You can find the document overview for this component here -> A-Frame 1.5.0 Animation.

Let's start with looping a single animation, which is very basic. Just by setting the 'loop' property to 'true' or a number, it will repeat your animation. You can utilize 'easing' and direction 'dir' for greater effect such as moving back and forth, but lets focus on looping.

<!-- Basic Animation Loop -->
<a-entity
id='animTest0'
position="-2 1 -3" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:#4CC3D9"

animation__basic="property: object3D.position.z; from: -3; to: -6; dur: 3000; delay: 0; loop: true; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
></a-entity>

This will animate our entity to move backwards and repeat that animation forever. Basic, but effective. Now, playing a set of animations in succession is also pretty basic. Just add multiple animations and calculate the delay for each subsequent animation, so that they play one after another.

<!-- Animation Set via Delay -->
<a-entity
id='animTest1'
position="-1 1 -3" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:#EF2D5E"

animation__set1="property: object3D.position.z; from: -3; to: -6; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"

animation__set2="property: object3D.position.y; from: 1; to: 3; dur: 3000; delay: 3000; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"
></a-entity>

This works okay, but is not ideal. The next step is to instead of calculating the delay for each one we can have the next animation listen for the previous animation's completion. To do so, you can utilize the 'startEvents' property with the animation's event which fires when it completes.

The event that fires is named 'animationcomplete__name' with 'name' being the name of the animation such as 'taco' with 'animation__taco'.

<!-- Animation Set via Events -->
<a-entity
id='animTest2'
position="0 1 -3" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:#FFC65D"

animation__set1="property: object3D.position.z; from: -3; to: -6; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"

animation__set2="property: object3D.position.y; from: 1; to: 3; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set1"
></a-entity>

That's better, but what if we want this set of animations to loop? For that, we can utilize the same technique we just used and have the 1st animation listen for the last animation's completion. While that itself is straight forward, using the 'startEvents' property introduces a caveat in the timeline logic. It causes the animation component to ignore the 'autoplay' property. That means when we use this technique to loop a set of animations, the very first animation will never fire automatically even if we set 'autoplay' to 'true'. So if we want this set of animations to start as soon as it is added, then we need to set up a precursor animation to start the loop chain. We can set any normal property to be animated with a duration of '0' and the 'to' / 'from' property equal to whatever start value it has. And when adding multiple event conditions to startEvents, you just need to seperate them with a comma ',' .

<!-- Animation Set Loop via Events # 1-->
<a-entity
id='animTest3'
position="1 1 -3" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:#7BC8A4"

animation__set0="property: object3D.position.z; from: -3; to: -3; dur: 0; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"

animation__set1="property: object3D.position.z; from: -3; to: -6; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set0, animationcomplete__set2"

animation__set2="property: object3D.position.y; from: 1; to: 3; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set1"
></a-entity>

Now we are looping! Although my basic 2 axis position animation set loop example doesn't look very good, here is one last example which will have the box move in a looping loop :).

<!-- Animation Set Loop via Events #2 -->
<a-entity
id='animTest4'
position="2 1 -3" 
geometry="primitive: box; height: 1; width: 1; depth: 1;"
material="shader: flat; color:#c87bbf"

animation__set0="property: object3D.position.z; from: -3; to: -3; dur: 0; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: true; enabled: true;"

animation__set1="property: object3D.position.z; from: -3; to: -6; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set0, animationcomplete__set4"

animation__set2="property: object3D.position.y; from: 1; to: 3; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set1"

animation__set3="property: object3D.position.z; from: -6; to: -3; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set2"

animation__set4="property: object3D.position.y; from: 3; to: 1; dur: 3000; delay: 0; loop: false; dir: normal; easing: linear; elasticity: 400; autoplay: false; enabled: true; startEvents: animationcomplete__set3"
></a-entity>

And there you go. Now you can build your own complex looping animations to make your A-Frame scenes sparkle. One last note, you can also use the Animation Timeline component to accomplish the same thing, but with the added bonus of connecting to other entities and their animations. Check out that component -> here.

That's it for this edition of Minty's A-Frame Tips & Tricks : Looping Animation Timeline.

If you would like to see more of my projects or get in contact with me, check out my portfolio @ MintyCrisp.com.

And if you enjoyed this content or any of my other work, please consider sharing or sponsoring me, so that I may be able to deliver better content more often. You can support me on Ko-fi

Thank you for reading!

A-Frame : Pac-Man XR Game Clone & Overview

Minty Crisp — Fri, 16 Sep 2022 04:11:18 +0000

Summary
Controls
How to Play
Game Clone Info
Components
Favorites
Difficulties
Future Builds

Open Game >

Open Github Repo >

Summary

An XR clone of the original Pac-Man video game. Play on Desktop, Mobile and in VR!

Controls

Movement

Desktop - Keyboard [WASD] [Arrows]
Desktop - Mouse Hover X Controller
Mobile - Tap X Controller
VR - 3DoF Controller

How to Play

Move Pac-Man Up, Right, Left or Down around the maze to eat all dots on the screen while avoiding four colored ghosts to advance to the next level. Eat Power Pellets to turn the tide on your enemies.

Game Clone Info

Using only aframe.js, all graphics, animations and controls are built from within the webxr framework. Allowing this 1 game to played in a variety of ways including an immersive large screen version in VR with classic Joystick like controls. Not all elements match the original perfectly and some need a bit of improvement like even more diverse ai, better collision and the unique Pac-Man turning radius. Working on more accurate designs to improve those systems in the future for a more authentic experience. The amount of overall entities as well are pretty high (about 800), but brainstorming ways to optimize further while keeping the customizable nature of the system intact.

Another interesting tidbit about the system is that the map and dot creator are customizable to allow for a variety of maps, sizes and colors as well. Currently only the original basic map and theme are loaded, but more to come later.

Components

Built

game_control : Contains all of the game logic and controls. Has a customizable map builder and dot builder that allows for obstacle and dot hit checking, so that more maps can be created and played. The player can be controled in a variety of ways and compatible with many hardware systems. The ghosts have scattering logic and adjusted ai personality's for when/how to chase the player. Many other small details have been created to attempt to match the original game as close as possible like the points system, level progression, power ups, tunnels, etc...

Public

A-Frame 1.3.0

Favorites

The graphics. The ghosts themselves turned out really interesting and main logo really pops with style. All graphics are built from internal geometry, no imported 3D models.

Difficulties

With a huge project such as this, there were many roadblocks. Thankfully I was able to get through them all. Some of the more difficult ones were the collision system, state management and pathfinding. The collision system itself is not perfect and a few instance where the ghost and player move at the same time can cause it to hiccup and not detect hits. It works well enough, but working on a better overall design to use smaller increments and detect groups of positions to check for hits for ideally perfect accuracy.

What I want to build upon this, in the future...

This is really the start of some interesting projects I want to build. Mostly old school games that I grew up and love that can be enjoyed in a variety of mediums. For OG arcade projects such as this, I would love to optimize it much more place the maze inside an arcade cabinet with the VR controller being an actual joystick in a vaporwave environment. A fully immersive Arcade is the dream!

Credits :

Original game and sounds by Namco

Dot and PowerUp hit sounds by LittleRobotSoundFactory

This is my first huge project as I am still learning the ways of Web Development and Web XR, so please be kind when reviewing or sharing. Otherwise, I hope you enjoy the game and thank you for taking a look.

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Spy on my Reddit comments

I am available for Web XR work if you are interested in hiring me or collaborating on future projects.

You can reach me via socials or email : minty-crisp @ proton . me

If you really enjoy my work and want to support me making more of these types of projects, you can help me out with a Ko-fi or just by sharing the game.

- Minty Crisp ^-^

A-Frame : Web XR Idle Click Game Demo & Overview

Minty Crisp — Sun, 26 Jun 2022 05:43:16 +0000

Summary
Controls
How to Play
Components
Game Functions
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

A playable demo for an idle click game built with A-Frame. In the story, you meet a genie who grants you a few wishes where you end up with a magic coin that creates money on touch. Every tap / click earns your base gold amount and you can encounter 7 different events which can pop up to help you earn huge as well as a store to spend it in for upgrades.

Controls

Orbit Cursor Movement

Desktop - Mouse : Left Click - Orbit, Right Click - Pan, Scroll - Zoom In/Out
Mobile - Screen : Swipe - Orbit, Two Finger - Pan, Pinch - Zoom In/Out

Click & Selection

Only the movement options are active.

Desktop - Click
Mobile - Tap

How to Play

Use the orbit Cursor to move around the 3D genie coin for a better view of the environment scenery and effects. You have access to a 2 game buttons ,Menu (internal functions incomplete) and the Store which is complete. You start with a tiny fortune that wont buy all that much, but have access to 100 half off / full off coupons to buy and test all the various upgrades. All Store items currently fall within 3 categories of Player Upgradesfor Click Earnings, Auto Clicker Unlockables / Upgrades as well as Event Upgrades . The game has an internal day/night cycle that lasts every 24 minutes and has a Sun and Moon orbiting the scene in sync for current reference of the time. During these daily time periods (afternoon, sunrise, midnight, etc..) a total of 7 unique events have a chance of popping up and are influenced by missed chances as well as store upgrades. You can see the Slot Machine play during each of these chances. When it lands on 3 matches, an event will start. These events are the real game as they have various challenges and grant huge bonuses.

Components

Built

timer-system : Throttled functions for every second, every 250ms and every 1 minute that handle html updates, auto clickers, day / night cycle and event checking. Find in JS(#findAframeComponent)

Public

Game Functions Built

Event High Noon w/ Animations : During the afternoon, the sun radiates gold and grants the player / auto clickers a critical hit and chance increase bonus. Handles all event controls. Find in JS(#findEventHighNoon)
Event Gold Coin Storm w/ Animations: Timing for event fluctuates every day, but the clouds erupt in gold coins and grants the player / auto clickers a straight bonus increase. Handles all event controls. Find in JS(#findEventGoldCoinStorm)
Event Genie Challenge w/ Animations : Timing for event fluctuates every day, the genie will challenge you to a varied amount click challenge and deduct a bet based on the difficulty of the challenge. If you win, you win big otherwise you lose your bet. Handles all event controls. Find in JS(#findEventGenieChallenge)
Event Bonus Round w/ Animations : During the sunrise, the genie being impressed with your recent work rewards you a slew of prize money options. And if you don't make a selection in time, 1 will be chosen for you. Find in JS(#findEventEventBonusRound)
Event Blue Moon w/ Animations : During the midnight, the moon beams bright blue and offers a series of temp event bonuses and 1/2 off store coupons earnable at set, but unknown click amount goals. Handles all event controls. Find in JS(#findEventBlueMoon)
Event Hades Prowl w/ Animations : Timing for event fluctuates every day, but a great beast named Hades attacks the player's gold pile syphoning off their treasure. If the player out earns the amount being stolen by the end of the event, they earn a 1 Free Item store coupon otherwise Hades will take 1 final swipe before fleeing. Handles all event controls. Find in JS(#findEventHadesProwl)
Event Cosmic Aurora w/ Animations : During the sunset, the starry sky opens up and gives a cosmic light show granting the player / auto clickers critical hit / chance and straight bonus increase for huge jackpots. Handles all event controls. Find in JS(#findEventCosmicAurora)
Event Checker w/ Animations : The main controller function for events and checking at the predetermined as well as generated times for each event every day. Event chance is varied every day from missed increases, pop resets to store upgrades. Find in JS(#findEventChecker)
PrettyNums : Handles prettying js numbers for display in html by adding symbols, commas every 3rd post period digit and managing decimal points for quartered increments. Find in JS(#findPrettyNums)
Store Screen Control & Updates : Handling of CSS changes, but also updating the 1 shared badge sub screen in the store. Find in JS(#findScreenControls)
Player Click : Checks for critical hits on every tap as well as handles event player click stats and some event bonuses. Find in JS(#findPlayerClick)
Auto Clicker 1/2/3 Synced : Checks for critical hits on every tap as well as handles event player click stats and some event bonuses. Find in JS(#findAutoClickers)
A few A-Frame and HTML updates : Included as much feedback as reasonable with inside A-Frame and HTML entities. Find in JS(#findHTMLUpdaters)

Favorites

The overall scene itself and a few event animations. While an idle click game does not lend itself to vr in it's current form, the immersiveness of the scene would be extra effective on a headset. It would require a more interesting interact mechainc, something like strumming a string or banging a drum. Also, the slot machine and animations, gold fish and curve following, event animation sequences and that shiny gold coin with earning notifications all look good.

Difficulties

CSS and Project Scale. Took a bit at first to nail down the CSS animation workflow and how Javascript can control it, but after that hump it became clear how powerful it is especially in the normal 2D web. For the project scale. No matter how small of an idea I kept trying to design for, there was just too much I wanted to do. Took a bit whittling down that list a few times, but in the end I have the project goals all more managable to create my vision in a completable timeframe.

What I want to build upon this, in the future...

I still have a bit more polish and essential functions to implement before it's ready for general release. With all the basic gameplay completed, I can also start user testing and getting some feedback as well for additional tweaks while attacking my next roadblock of JSON file use.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

- Minty Crisp ^-^

A-Frame : Web XR Isometric Node Navigation & Overview

Minty Crisp — Sun, 26 Jun 2022 05:37:18 +0000

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

The scene is split into 2 halves and configured for Isometric view only. 1 with the 3D Iso world and the other with the HTML player controller. Use the controller in blue to move your cube avatar from the starting point around the field.

Controls

Avatar Movement

Desktop
Mobile
Use the player controller to move Up Left, Up Right, Down Left or Down Right within the connected nodes.

Player Controller

Desktop - Click & Drag from the center circle to 1 of the 4 directional options.
Mobile - Swipe from the center circle to 1 of the 4 directional options.

Only the movement options are active.

What to Do

Using the player controller, select a direction in which your avatar would be able to travel on the node map. Avatar Travel requires a lined connection and cooresponds to the directions of Up Left, Up Right, Down Left and Down Right based on the user's location to the connected node.

Components

Built

node-grid-gen : Generates the numbered grid, lines, colors, positions, layout and animation stack for each node. Every node that has a line connecting to 1 of it's 4 sides generates an animation to that line's end position which activates from an event naming scheme of node#to-node#. As well as an accompanying entity with it's own reveal and hide animation when the user moves to and from that node specifically.
player-travel : Hardwired logic for traversing the node map in it's current form, animation event timings, the player controller inputs as well as event emitters for all possible movements that activate the avatar's position animation./li>

Public

Favorites

If you are a quick swiper you can move quite fast and even off the line animation grid to kind of fly through to your destination. This is an interesting side effect of the current implementation which simply animates the user to the node's current position and that animation being updated on each subsequent directional input. Otherwise it seems that you would have to create an animation queue to cycle through the selected list in a a-timeline as animations will conflict with each other if they share the same properties at the same time.

Difficulties

The player controller is built out of another dev's great work to recreate the Android lock screen in javascript they shared. While it provided in HTML what I had envisioned, I could not seem to integrate those functions within the XR scene to allow the same drag style in the 3D world. To many wide differences with how they utilized classes and svg's to create the effects for use with the default code. Also very helpful when I am ready to recreate it within XR too.

What I want to build upon this, in the future...

This effect in VR finally and support the normal click / swipe to start a drag, click to stop drag or drag to option for selection which seems to cover Desktop, Mobile and VR controller. Or instant / activated hover select dragging with additional control selections similar to the locomotion belt controller in the Hub scene. And allow the user to travel this node map with the teleportation mode types as well.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

- Minty Crisp ^-^

A-Frame : Web XR Asset Color Customization & Overview

Minty Crisp — Sun, 26 Jun 2022 05:32:55 +0000

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

Customize a skateboard's color scheme in 3D by adjusting the board, the wheels and each of the 3 main truck parts individually or cycle through random variations instead.

Controls

Orbit Cursor Movement

Desktop - Mouse : Left Click - Orbit, Right Click - Pan, Scroll - Zoom In/Out
Mobile - Screen : Swipe - Orbit, Two Finger - Pan, Pinch - Zoom In/Out

Click & Selection

Desktop - Click
Mobile - Tap

What to Do

Use the Orbit Cursor to move around the 3D skateboard to preview it from all angles. Use the HTML buttons to adjust the color selection for each of the 5 sets of parts. You can also hit the Randomize button to randomly pick a color for each of the part sets.

Components

Built

system : Handles the collection of assets by part class and the assigning of colors via button selections as well as the randomize feature.

Public

Favorites

The randomize function is satisying to cycle through the many variations.

Difficulties

This was a pretty straight forward scene although it became obvious the more simple a scene was, the more impressive the model needs to be. With the help of other talented artists at blendswap.com/ I was able to find a good starting point and spent a large chunk of development time just prepping the 3D model. If you have 5 hours to cut down a tree, spend the first 3 hours sharpening your axe essentially.

What I want to build upon this, in the future...

Add support for immersive VR to play around with the model and make selections, but also AR support. Not just to let it float in the scene which is just no background with A-Frame AR, but to actually orientate it and stick it to the user's hand / the floor / wall etc... Supporting additional assets that are ideally based on or scanned from real world objects and allowing further more detailed part customizations.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

- Minty Crisp ^-^

A-Frame : Web XR Hub Home, UI, Locomotion & Overview

Minty Crisp — Sun, 26 Jun 2022 05:26:01 +0000

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

A minor procedurally generated Thunder Storm scene with Teleportation Nodes for quick movements within the 3D world and different types of motions to help avoid vr sickness.

Controls

View Cursor Movement

Desktop - Mouse
Mobile - Gyro / Swipe
VR - Headset

Click & Selection

Desktop - Click
Mobile - Tap
VR - Controller Click

Locomotion Controls (Hover Only)

Top Thick Bar Go Forward
Mid Skinny Bar Go Backward
Bottom Bar Chunks Swap Speed Modes (Fast / Slow)

What to Do

Use the View Cursor to look around the 360 environment and Hover over the transparent locomotion controls surronding you to move around the world. When moving, assets will respawn when you move too far away from them. You can also interact with the Settings, Theme Screen and Play/Pause buttons via clicks. You can click to change the basic theme from the Settings button and Theme Screen. There's no real special configuration for the scene links, but I also added a few connections between other various scenes to travel between.

Locomotion Operation

In it's default mode, the 2 main control bars will be near level to the user's eyesight. Hover over either bar with the cursor to activate it. The top thick bar will move the user forward in the direction the cursor is facing. The thinner bar right below will move the user in reverse of the cursor's direction. At the very bottom are 4 small blocks which when Hovered over will swap the speeds from Fast to Slow as well as move the forward / reverse bars out of the main viewport. Hover over the bars to move slowly and fine tune your position. Hover now over 1 of the 4 now red blocks to to swap speeds and bar position again.

Components

Built

variable-init : Sets a global variable on the user's entity for the current theme color selection.
attach : Allows attaching of any entity in the scene to another entity in the scene by id. Used to attach the below belt component to the user.
belt : All controls to handle the locomotion movement of a player with only hover needing to activate. Can move the player forward or backward at 1 default speed or the user can switch the belt layout to a slower speed and have it adjusted out of the main view area, but still allow slow movement for fine tuning.
spawnmediabuttons : Grabs various assets declared in the scene specifically obj models to be combined with A-Frame materials to recreate a media player.
themechangebutton : Media buttons spawned with A-Frame materials as well as other marked materials allow their colors to be changed through the Setting Icon clicked and from the Theme Screen popped up to adjust the selections there.
playpausebutton : Changes the visibility of the companion assets that would act a media player responding to the available commands for play and pause.
settingsbutton : Enables the visibility of the Theme Screen on and off.
canvas-test : A Basic test using the HTML Canvas as a material within XR. Entities with this material are also tests for a public A-Frame Mesh Instance component.
environmentspawnwithuser : The true monster component of them all. This handles the most updated version of my asset generation and placement within A-Frame via Javascript as well as now respawning with the user as they move out of range from the originally spawned location to where the user is heading.

Public

Favorites

The belt locomotion machine and animations were super fun to play with. Just a simple hover almost like a swipe to transform your mech for various functions is just too cool. XR could even be used as a good way to prototype IRL improvements for the handicapped and physically disabled. Hell, simply integrating an AR version of movement control via various inputs could be a life changer for some.

Difficulties

Having the assets generally respawn in the user's view and current travel direction took a lot of re-iteration. Had many approaches setup depending on the XZ grid the user is looking through and/or which direction they are traveling.

What I want to build upon this, in the future...

A user component to handle all of their preferences within a larger hub of linked A-Frame scenes. Storing the user preferences and transferring them from 1 page to the next. Much easier on the same domain, but could be accomplished otherwise with a shared api connection or with a common cookie etc... This will allow scenes that pre-approve of this component add-on to have users visit the page and not have to reconfigure their interaction setup. Are they a hover / fuse click user that needs swiped based teleportation or are they a full vr user with 2 6DoF controllers who slowly glides around. Components like these will help lower the entry bar for both devs and new potential users.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

- Minty Crisp ^-^

A-Frame : Web XR Thunderstorm Scene w/ Teleportation Types & Overview

Minty Crisp — Sun, 26 Jun 2022 05:21:30 +0000

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

A minorly procedurally generated Thunder Storm scene with Teleportation nodes for quick movements within the 3D world and different mode types to help avoid vr sickness.

Controls

View Cursor Movement

Desktop - Mouse
Mobile - Gyro / Swipe
VR - Headset

Click & Selection

Desktop - Click
Mobile - Tap
VR - Controller Click

What to Do

Use the View Cursor to look around the 360 environment and interact with a few various items in scene, most notably the colored circles on the ground. Click to a node to ready it for travel. Once ready, you may select Cancel to stop or select Teleport Here to move to that location with the currently selected move effects: instant, fade, locomotion, sphere or blink. Cycle through move effects in the center area on the blue screen by clicking it.

There are also a total of 4 assets in the scene that are each clickable. When all are found, it unlocks a secret locomotion teleport from the center ground to high up in the sky and back.

Components

Built

rain : Generates a set of entities to recreate the visual effects of rain and ground splatter along with it's inherit randomness.
raindrop : Controls the rain's main animation of falling and resetting to a new random position within a set radius from the user to help simulate endless rain on movement. Aka, it's the universe doesn't like you rain cloud that follows you everywhere.
lightningbolt : Generates a complex set of entities that make up a Lightning Bolt visual that hits randomly within a set interval. The random hits start an animation chain to more realistically simulate the type of effect with varied blink phases and the scene lighting being affected as well.
scenespawner : Spawn randomized versions of and positions of a lily pond, gltf animated rigged grass, gltf tree w/ a-frame animations, rocks, fireflys w/ a-frame animations, flowers w/ a-frame animations and clouds w/ a-frame animations. All other scene objects and animations are in HTML like the sky and ground.
teleportation : Handles the various move types of instant, fade, locomotion, sphere and blink to move the user to the location of their choice.
teleport-button : Allows the user to adjust the Move Type via a blue-screen at center using an entity's properties as an accessible global variable.
secret-init : Sets up the Secret Teleport animations as well as the entity Global Variable for manaing Secrets Found.
secret-button : The required component to make an asset a clickable secret. Added to 4 total assets with feedback and when all are found, they show a new button at the center to access the secret teleport.
secret-teleport1 : Event Emitter for the Up animation.
secret-teleport2 : Event Emitter for the Down animation.

Public

Favorites

The rain, lightning and sounds all coming together really helps sell the immersion. And The rotating alpha sky with gradient animated background as well is amazing. Created that 360 star alpha'd image in Blender and wrapped that sky entity within another color gradient sky. It animates in a rotation similar to platery star rotations as well as the gradient animates through varies colors for a cosmic light show.

Difficulties

Manually moving the user and getting a multiple controls set up, everything else felt like cake in comparision. I spent a lot of time playing with configurations for the user, their rig and all sub entities. I was able to get a solid set up for Click, Fuse and Controller based controls that worked well on the 3 setups for desktop, mobile & vr.

What I want to build upon this, in the future...

Generating entites is amazing fun stuff and so much potential there. What this scene really helped spark in me was the importance of how the user navigates their environment or how the environment navigates around the user. This is a seemingly unlimited and non-physically restricted reality, why limit ourselves to real world travel limitations? Granted, ease of use, accessibility and someone not making that better idea yet have kept use here. We just need more experimentation.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

- Minty Crisp ^-^

A-Frame : Web XR Animation Testing Scene & Overview

Minty Crisp — Sun, 26 Jun 2022 05:05:17 +0000

Summary
Controls
What to Do
Animations
Components
Favorites
Difficulties
Future Builds

Open Demo >

Summary

An experimental scene filled will many different types of animated properties and material tests for visual references.

Controls

View Cursor Movement

Desktop - Mouse
Mobile - Gyro / Swipe
VR - Headset

Movement (Desktop Only)

Desktop - Keyboard [WASD]

What to Do

Use the View Cursor to look around the 360 environment of the various animations to get an idea of what kind of animations can look smooth through their cycles. All animations avoid the bool type which are merely timed on / off switches.

Animations

Entity Properties with Tween Support

Rotation
Position
Scale
Material > Emissive Color
Material > Emissive Intensity
Material > Color
Material > Opacity
Light > Color
Light > Angle
Light > Intensity
Light > Distance
Light > Decay
Light > Penumbra

Geometry Properties with Tween Illusion

Geometry animation is very heavy on performance as it creates new mesh on every tick, but used minimally could look very cool.

Geometry > Depth
Geometry > Height
Geometry > Q
Geometry > P
Geometry > Phi Length
Geometry > Radius
Geometry > Radius Top
Geometry > Radius Tubular
Geometry > Segments
Geometry > Segments Height
Geometry > Segments Width
Geometry > Segments Depth
Geometry > Segments Phi
Geometry > Segments Radial
Geometry > Segments Theta
Geometry > Segments Tubular
Geometry > Theta Start
Geometry > Theta Length
Geometry > Vertex A
Geometry > Width

Public Components

Favorites

That lights are so animateable. Practically every property can be tweened and really has the potential for some fascinating light shows and effects.

Difficulties

The anchor point of an entity always being dead center. It's not adjustable within A-Frame from my research and I could not find a component or a ThreeJS way I could integrate to tweak that anchor position. It made animating something growing or shrinking in 1 direction very difficult, for example. The blue bar growing and shrinking has 2 animations. 1 for growing and 1 to animate the position in attempt to compensate as if it's anchor point was on the left edge. It does not look very good too.

And finding out Geometry animations being so heavy. This scene has way too much of it, but it's okay for a test scene.

What I want to build upon this, in the future...

So many more possibilities for built-in animations especially if creating a manual animation component in javascript. Something like making a typewriter reveal effect for text display. There are also a good amount of additional Javascript frameworks like ammo.js and anime.js that can be integrated, but also smaller abstract ones like that many vtubers use to rigify their body to a 3D avatar via camera. Translating something that into the XR ecosystem would be a huge boon for it's immersive qualities.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

- Minty Crisp ^-^

A-Frame : Web XR Orb Sky Changer Scene & Overview

Minty Crisp — Sun, 26 Jun 2022 04:40:00 +0000

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

Swap the scene's sky image with 1 of 6 bubble selections that each hold a unique 360 image.

Controls

View Cursor Movement

Desktop - Mouse
Mobile - Gyro / Swipe
VR - Headset

Click & Selection

Desktop - Fuse Click (Hover for 2sec)
Mobile - Fuse Click (Hover for 2sec)
VR - Fuse Click (Hover for 2sec)

What to Do

Use the View Cursor to look around the 360 environment and Hover over a floating bubble. This will pause the orbit rotation for all bubbles. Continue to hover over that bubble for 2 seconds to select it as a sky replacement. When activated, the sky swap animation will play. Once completed, the bubbles will resume their orbit and you may continue to swap through all of the images.

Components

Built

orb-expanding : Controls the main animations, timings and adjustments of the entity properties for the bubble swaps. Also assists in disabling of additional user interaction during the swap phases.
sky-fix : The sphere of the bubbles themselves are constantly rotating to show off their scenery. Once selected, the bubble's rotation will not match the sky's and this aligns the sky to smooth the transition.
center-sky-fix : Because of the inheritance with parent / child relationship and their properties as well as the way the orbit is configured, matching the sky's rotation required it's own parent and that parent needed it's own rotation to be calculated for a match. This syncs the bubble's parent rotation with the sky's parent rotation for a smooth transition as well.
orbit-user : This builds the continuous orbit loop animation for each bubble based upon their parent. Each bubble has a parent which is rotated based on how many spheres equally from 360. Each of the children hold a sphere and have a position offset in 1 direction which acts like a radius of a circle around the user.

Public

Favorites

The floating bubble animations and expand with fade as well were quite satisfying to nail down, but I really enjoyed making the animations for the cursor countdown on Fusing.

Difficulties

It was mostly just figuring out the method and types of variables that A-Frame would accept changes from Javascript for dynamic animations.

What I want to build upon this, in the future...

A scene with a sea of bubbles floating all around the user with a gradient colored environment. The user can 'reach out' and pull in any bubble closer to inspect in better detail. Every bubble contains a set of media and plays a preview of it when the user holds it. A song, a video, an image, a handheld animated 3D scene of a fully immersive one, a soundeffect, a scene effect like fireworks or a sunset animation, the ability to float or shoot fireballs. Just an endless stream of selectable user creations wether traditional entertainment like 2D media or more integrated XR items like assets, scenes, components and configurations. Even things like mini-games, puzzles and quests as well. Also having ways of sorting and identifying things far away. Things like categories that have specific colors/textures, material properties, shapes, animations, media previews and easy ways of sorting.

Thank you for your time!

More Dev Articles

My homepage mintycrisp.com

View my Github Repositories

Peruse my Tweets

Ko-fi tips if you enjoy my work

DEV Community: Minty Crisp

Minty's A-Frame Tips & Tricks : Parent Child Relationship

Minty's A-Frame Tips & Tricks : Looping Animation Timeline

A-Frame : Pac-Man XR Game Clone & Overview

Table of Contents

Summary

Controls

Movement

How to Play

Game Clone Info

Components

Built

Public

Favorites

Difficulties

What I want to build upon this, in the future...

Credits :

- Minty Crisp ^-^

A-Frame : Web XR Idle Click Game Demo & Overview

Table of Contents

Summary

Controls

Orbit Cursor Movement

Click & Selection

How to Play

Components

Built

Public

Game Functions Built

Favorites

Difficulties

What I want to build upon this, in the future...

Thank you for your time!

- Minty Crisp ^-^

A-Frame : Web XR Isometric Node Navigation & Overview

Table of Contents

Summary

Controls

Avatar Movement

Player Controller

What to Do

Components

Built

Public

Favorites

Difficulties

What I want to build upon this, in the future...

Thank you for your time!

- Minty Crisp ^-^

A-Frame : Web XR Asset Color Customization & Overview

Table of Contents

Summary

Controls

Orbit Cursor Movement

Click & Selection

What to Do

Components

Built

Public

Favorites

Difficulties

What I want to build upon this, in the future...

Thank you for your time!

- Minty Crisp ^-^

A-Frame : Web XR Hub Home, UI, Locomotion & Overview

Table of Contents

Summary

Controls

View Cursor Movement

Click & Selection

Locomotion Controls (Hover Only)

What to Do

Locomotion Operation

Components

Built

Public

Favorites

Difficulties

What I want to build upon this, in the future...

Thank you for your time!