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

Labels:

Comments

Post a Comment

Popular posts from this blog

[FINAL] - Where to find our game

Hello future builders, we're 3 programmer-artists that make up the Seismic Octopus team: Mitchell Koch - lead programmer, game tester, researcher  Priscilla Lo - project manager, sound design, lead 2D artist, programmer, documentation  Maxime Vincent - lead 3D artist, lighting designer, game tester We finished this course in May 2020 with a final release of Build-a-Furniture available on GitHub: https://github.com/Areizza/Build-a-Furniture Although this semester was full of hardships and unprecedented times near the end, we got through it together and are proud to present our simple web-VR game. Check it out and let us know what you think! :)
Post a Comment
Read more

Sprint 10 - Adding more boxes and lots of scripting

As the final submission draws near, lots of work has yet to be done. Due to time constraints and the lack of resources in light of recent events, we made the decision to cut down our scope by removing VR functionality entirely and focus on desktop-to-desktop connection fully. With new goals in mind, I spent the beginning of the week by adding all the boxes for spawning furniture components. To do so, I started by replacing the blue boxes we used previously with stylised boxes that match the environment better. To tell the player what each box contains, an image of the rendered component is placed on each side. The challenge here was that I wanted to avoid creating a GLTF for every single box because it would have slowed down the page drastically. The solution was to instead use a single, universal GLTF for every box and placed images on each side of the box as explained previously (~6hrs). New Warehouse Area - Added new boxes Close up of updated box - Bright colours and side ...
Post a Comment
Read more

Making Instructions

This week, I worked on creating all the instructions images for both the Warehouse and the Living Room. Although this was not a very difficult task, it was tedious to work on and took around 3hrs to complete. It was a challenge to adjust to our new schedules given the current circumstances and allot appropriate time to spend on each of our classes. The instructions in the Living Room show the current required furniture pieces and their quantities, which the Builder will need to communicate to the Finder in the Warehouse. See below for an example of pieces required for a table. On the other hand, the instructions in the Warehouse would show the symbols on the different furniture pieces that should touch in order to be combined, which the Finder will need to communicate to the Builder in the Living Room. See below for an example where the green heart marking should be made to touch the green circle marking. I will be putting the source link for these instructions into arr...
Post a Comment
Read more