Skip to main content

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 entities that have their components synced across all clients.  Only the 'position' and 'rotation' components are synced by default, but implementing custom components is quite simple, as shown below.

NAF.schemas.add({
  template: '#avatar-template',
  components: [
    'position',
    'rotation',
    'scale',
    {
      selector: '.hairs',
      component: 'show-child'
    },
    {
      selector: '.head',
      component: 'material',
      property: 'color'
    },
  ]
});  

The above code, taken from the Networked Aframe GitHub, shows the implementation for syncing the custom 'show-child' component, as well as the 'material' component.  However, due to the nature of our project, where each player will be in their own environment and will not need synced entities, using Networked Aframe just for voice chat may be overkill.

Finally, I also took the time to experiment with the Aframe systems element.  Systems provide overarching management and services to the entire application, and they are often used to manage the game state or NPC elements of games.  These systems rely on events to communicate with various components in the application.  My first attempt was not wholly successful, but I figured out a lot of does-and-don'ts for when it comes time to implement such systems in Build-A-Furniture

Comments

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! :)

Catalogue, Sound Effects, JSON for Instructions

This week I updated the image for the catalogue and added it to the Living Room environment as an image plane (~2hrs). I am currently adding smaller clickable planes on top of it to represent the different furniture options to choose to build. A screenshot of this can be seen below. I also looked for some sound effects to use for user feedback (~2hrs) when pieces are combined together correctly, incorrectly, pieces are dropped, etc. These sound files have been added to the shared drive and will be implemented in the code in the next few days. Some example sounds can be listened to at the following links: https://freesound.org/people/NenadSimic/sounds/150879/ https://freesound.org/people/grunz/sounds/109662/ https://freesound.org/people/GabrielAraujo/sounds/242501/ https://freesound.org/people/kirbydx/sounds/175409/  I also worked on adding JSON for the builder.js and finder.js files to store the required information for the instructions (~1hr). An example o...

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 = ...