Skip to main content

Spawning Templates and Refining Snap-Points

This past week saw the development of a component for spawning in pieces of furniture with their snap-points already attached (~4 hours), as well as an improvement on the snapping system that removed strange physics behaviour from joined components and increased maintainability (~6 hours).  Unfortunately the week was also busy there was less progress on the code than I had hoped for.

 Since there will be a lot of different pieces that could be spawned by either the Finder or Builder in the course of a game we needed some way of quickly creating the entities with their snap-point already placed, and they had to be identical for both players.  The solution I found involves the aframe-template-component, which allows an entity to pull child elements and attributes from an external storage file.  The below code demonstrates the implementation of a template file.

<a-mixin id="wing" geometry="primitive: box; depth: .005; height: 1; width: 0.5"
                   pivot="0.15 0" material="color: red" scale="0.5 0.625 0.5"> 
</a-mixin>
<a-mixin id="flap" attribute="rotation" direction="alternate" repeat="indefinite">
 </a-mixin>

<a-entity position="{{ position }}">
  <a-animation attribute="rotation" to="0 360 0" dur="3000"
               easing="linear" repeat="indefinite"></a-animation>
  <a-entity rotation="0 90 0" position="2.5 -1 0">
    <a-entity rotation="-45 0 90">
      <a-entity mixin="wing">
        <a-animation mixin="flap" to="0 120 10"></a-animation>
      </a-entity>
    </a-entity>
    <a-entity rotation="-45 0 90">
      <a-entity mixin="wing">
        <a-animation mixin="flap" to="0 -120 10"></a-animation>
      </a-entity>
    </a-entity>
  </a-entity>
</a-entity>

This template file can then be added in the <a-assets> tag and applied to an entity like so:


        <script id="butterflies" src="butterflies.template">
              <a-entity template="src: butterfly.template; type: handlebars"
                        data-position="{{ x * 10 }} 1 {{ z * 10 }}"></a-entity>
        </script>

I do want to see if the templates can be stored in a .json file to reduce the number of files we need to create.

Additionally, I implemented a 'tier' property on the snap-point component that is used to indicate the piece's child/parent relationship to the rest of the furniture pieces.  This replaces the "isParent" boolean that was originally used to indicate which piece was the parent.  This new property allows for more complex parent/child structures.

With the beta deadline fast approaching the next week will see a dramatic ramp up in the work being completed.
Labels:

Comments

Post a Comment

Popular posts from this blog

Sprint 5 - Finishing the Furniture

This week, I completed modelling (4hrs) and texturing (7hrs) the furniture that will be used in the scene. It took longer than I expected because I had difficulty nailing down an art style while also working with new techniques in Substance Painter that I wasn't familiar with. A big challenge was finding a style that I really liked and understanding how to achieve that. My experience is more in realistic modelling and texturing where it's easy to see where things don't look right. However, with stylized pieces, it's up to my own interpretation. I'm also working with a very base, low-resolution mesh because I want to avoid creating too much detail through normal or height maps. The simpler, the better, but, the simpler, the less there is to work with. The grand solution in nailing down a flexible art style was through the use of ambient occlusion. By baking the same model over itself, I get an AO map, which already improves the look dramatically as it removes ...
Post a Comment
Read more

Aframe Systems and Networked-Aframe

This week saw less direct contribution to the project, and had a greater testing and learning component to it.  Most of my time in the past week was devoted to a different Aframe project that involved a multi-user interaction with a cooperative and competitive component.  I used this project as a guinea pig to test out Networked-Aframe and some more 'advanced' Aframe design patterns (~25 hours). Networked-Aframe is a framework built on top of Aframe that integrates WebSockets and component syncing to streamline the process of creating multi-user Aframe projects.  The main feature of Networked-Aframe we are interested in was the voice chat support, as we feel it could be a great feature to have for playing the game with friends remotely.  However, I also set out to see if there are other features in the framework that could be useful in developing our project.  An element I did find useful was component syncing, which uses HTML <template/> tags to create ...
Post a Comment
Read more

Building the Shelf and Chairs

With the final submission looming closer, most of my effort was directed at replacing some hard-coded game-play functionality with dynamic data from the Builder and Finder systems (~3 hours), assisting my team with issues they encountered (~2-3 hours), and getting the shelf and chair ready to be built by the players (~8 hours). The Builder and Finder systems still had a few hard-coded values from the Beta build of the project that were specific to constructing the table, so I worked on replacing those with the data that is contained in the instructions arrays that Priscilla and Maxime created this week.  I was initially have problems accessing this array before I discovered that JavaScript arrays can be accessed by string, which simplified it a lot.  Below is an example of the before and after of this process. // Before socket . on ( 'setFurn' , function ( data ) { this . current = data . id ; // Where data.id was always "table" this . step = ...
Post a Comment
Read more