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

use texture atlas for menu selected challenge

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-07 00:23:16 -07:00
parent 5996d9a190
commit 6416d24d2e
4 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/menu-selected-challenge-image.js
View File

@@ -1,24 +1,27 @@
/**
* Reuse images from the search results to not create another texture.
* Reuse images from the search result.
*/
AFRAME.registerComponent('menu-selected-challenge-image', {
dependencies: ['geometry', 'material'],
schema: {
selectedChallengeId: {type: 'string'}
selectedChallengeIndex: {type: 'number'}
},
init: function () {
this.searchResultEls = document.getElementById('searchResultList');
const el = this.el;
this.searchThumbnails = document.getElementById('searchThumbnailImages');
el.getObject3D('mesh').material.map = this.searchThumbnails.getObject3D('mesh').material.map;
el.getObject3D('mesh').material.needsUpdate = true;
},
update: function () {
const data = this.data;
const el = this.el;
if (!data.selectedChallengeId) { return; }
if (data.selectedChallengeIndex === -1 || data.selectedChallengeIndex === '') { return; }
const imageEl = this.searchResultEls
.querySelector(`[data-id="${data.selectedChallengeId}"] .searchResultImage`);
el.getObject3D('mesh').material.map = imageEl.getObject3D('mesh').material.map;
el.getObject3D('mesh').material.needsUpdate = true;
// Update UVs.
el.setAttribute('atlas-uvs', 'row', data.selectedChallengeIndex + 1);
}
});

2
src/state/index.js
View File

@@ -48,7 +48,7 @@ AFRAME.registerState({
downloads: '',
downloadsText: '',
id: '',
index: '',
index: -1,
image: '',
songName: '',
songSubName: ''

19
src/templates/dialogs.html
View File

@@ -42,22 +42,17 @@
<a-entity id="pauseDialogInfo" position="1.64 -0.12 0.798" rotation="0 -55 0">
<a-entity mixin="slice" slice9="width: 0.77; height: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>
<a-entity id="menuSelectedChallengeImage"
bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
geometry="primitive: plane; height: 0.3; width: 0.3"
<a-entity id="dialogImage"
bind__menu-selected-challenge-image="selectedChallengeIndex: menuSelectedChallenge.index"
geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
material="shader: flat"
atlas-uvs="totalColumns: 1; totalRows: 6; column: 1"
position="0 0.382 0"></a-entity>
<a-entity id="menuSelectedChallengeInfo">
<a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
<a-entity id="dialogSelectedChallengeInfo">
<a-entity class="dialogSelectedChallengeSongSubName" position="0 0.058 0"
mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
<a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
<a-entity class="diallogSelectedChallengeSongName" position="0 -0.031 0"
mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: menuSelectedChallenge.songName"></a-entity>
<a-entity class="menuSelectedChallengeAuthor" position="0 -0.257 0"
mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
<a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0"
mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
</a-entity>
</a-entity>
</a-entity>

5
src/templates/menu.html
View File

@@ -165,9 +165,10 @@
bind__visible="!!menuSelectedChallenge.id"
position="0.82 0 0.001">
<a-entity id="menuSelectedChallengeImage"
bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.id"
geometry="primitive: plane; height: 0.3; width: 0.3"
bind__menu-selected-challenge-image="selectedChallengeIndex: menuSelectedChallenge.index"
geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
material="shader: flat"
atlas-uvs="totalColumns: 1; totalRows: 6; column: 1"
position="0 0.382 0"></a-entity>
<a-entity id="menuSelectedChallengeInfo">
<a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"