juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save draw calls on menu-difficulty-select, make active-color aware of visibility optimizations

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-01 16:26:43 -07:00
parent dce298d568
commit 865f0cb82f
3 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/active-color.js
View File

@@ -11,13 +11,15 @@ AFRAME.registerComponent('active-color', {
init: function () {
this.defaultColor = this.el.getAttribute('material').color;
this.materialObj = {color: this.data.color, opacity: 1};
},
update: function () {
var el = this.el;
if (this.data.active) {
el.setAttribute('material', {'color': this.data.color, 'opacity': 1});
el.setAttribute('material', this.materialObj);
el.object3D.visible = true;
} else {
el.setAttribute('material', 'color', this.defaultColor);
if (el.components.animation__mouseleave) {

4
src/components/menu-difficulty-select.js
View File

@@ -6,9 +6,11 @@ var bindEvent = require('aframe-event-decorators').bindEvent;
AFRAME.registerComponent('menu-difficulty-select', {
init: function () {
this.el.sceneEl.addEventListener('menuchallengeselect', () => {
this.el.object3D.visible = false;
setTimeout(() => {
this.el.components.layout.update();
});
this.el.object3D.visible = true;
}, 150);
});
},

7
src/templates/menu.html
View File

@@ -116,6 +116,7 @@
></a-entity>
<!-- Top-aligned. TODO: Smart-centering. -->
<!-- Uses bind-for and bind-item to render difficulties. -->
<a-entity id="menuDifficulties"
bind-for="for: item; in: menuDifficulties; updateInPlace: true; pool: 5"
bind__visible="!!menuSelectedChallenge.id"
@@ -130,13 +131,17 @@
bind-item__active-color="active: menuSelectedChallenge.difficulty === item"
bind-item__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== item"
bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.difficulty !== item"
bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.difficulty !== item"
bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
geometry="primitive: plane; width: 0.4; height: 0.2"
material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
position="0 -0.005 0"
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
animation__mouseenter="property: components.material.material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-entity>
animation__mouseentervisible="property: visible; from: false; to: true; startEvents: mouseenter; pauseEvents: mouseleave; dur: 1"
animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
animation__mouseleavevisible="property: visible; from: true; to: false; startEvents: mouseleave; pauseEvents: mouseenter; dur: 160"></a-entity>
<a-entity class="difficultyText" mixin="textFont" bind-item__active-text-color="active: menuSelectedChallenge.difficulty === item" active-text-color="color: #333" bind-item__text-uppercase="value: item" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
</a-entity>
</template>