Hi,
I’m not positive I can phrase this question the right way. You know how right after scanning the QR code, the screen will show your 3D content against a black screen for a while until the camera activates? I don’t want that; instead, I’d like for the screen to show a custom image background behind the loading progress.
I found an example project by George Butler with a splash screen and a tap to activate. I don’t need tap to activate, but I want to substitute my own image in place of the purple splash screen in the example. Because I’m already using a world tracking template, I can’t just build my project from the splash screen example project without losing the world tracking function. So, I figured I could just substitute my own image file, put it into an asset folder labeled Splash-Screen, and then tweak a few things in the code. However, I can’t find exactly what to tweak in order to make sure it’s my content that shows up. For starters, I don’t have any custom logos–I just want my image background to appear, so I would probably need to cut out some chunks of the code in splash-screen.ts. I’m a beginner to code, so the ts file is honestly difficult for me to understand. At first, I wanted to see if I could replicate the splash screen effect in my own project file using the example logos/svg. But I keep getting errors while building. The console outputs something like ‘Couldn’t create clone. Did you forget to set EntityToSpawn?’ I tried commenting out some lines, but got so turned around I don’t know what I’m doing anymore. Basically I want to adapt my own project to have the custom splash screen while loading my content without having to switch templates.
Thank you so much for any guidance.
Here is the code of splash-screen.ts in that example file if it helps:
import * as ecs from '@8thwall/ecs'
const componentsForClone = [
ecs.Position, ecs.Quaternion, ecs.Scale, ecs.Shadow, ecs.BoxGeometry, ecs.Material, ecs.ScaleAnimation, ecs.PositionAnimation,
ecs.RotateAnimation, ecs.CustomPropertyAnimation, ecs.CustomVec3Animation, ecs.FollowAnimation,
ecs.LookAtAnimation, ecs.GltfModel, ecs.Collider, ecs.ParticleEmitter, ecs.Ui, ecs.Audio,
]
const cloneComponents = (sourceEid, targetEid, world) => {
componentsForClone.forEach((component) => {
if (component.has(world, sourceEid)) {
const properties = component.get(world, sourceEid)
component.set(world, targetEid, {...properties})
}
})
}
ecs.registerComponent({
name: 'Tap Place',
schema: {
//entityToSpawn: ecs.eid, // Entity ID for the entity to spawn
//minScale: ecs.f32, // Minimum scale for the spawned entity
//maxScale: ecs.f32, // Maximum scale for the spawned entity
// },
schemaDefaults: {
minScale: 1.0, // Default minimum scale is 1.0
maxScale: 3.0, // Default maximum scale is 3.0
},
data: {
lastInteractionTime: ecs.f64,
},
stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
ecs.defineState('default')
.initial()
.onEnter(() => {
const {entityToSpawn} = schemaAttribute.get(eid)
if (entityToSpawn) {
// Disable the entityToSpawn
ecs.Disabled.set(world, entityToSpawn)
}
})
.listen(eid, ecs.input.SCREEN_TOUCH_START, (e) => {
const {entityToSpawn, minScale, maxScale} = schemaAttribute.get(eid)
const currentTime = Date.now()
if (currentTime - dataAttribute.get(eid).lastInteractionTime <= 500) {
return
}
dataAttribute.set(eid, {
lastInteractionTime: currentTime,
})
if (entityToSpawn) {
const newEntity = world.createEntity()
const randomScale = Math.random() * (maxScale - minScale) + minScale
cloneComponents(entityToSpawn, newEntity, world)
ecs.Position.set(world, newEntity, e.data.worldPosition)
ecs.ScaleAnimation.set(world, newEntity, {
fromX: 0,
fromY: 0,
fromZ: 0,
toX: randomScale,
toY: randomScale,
toZ: randomScale,
duration: 400,
loop: false,
easeOut: true,
easingFunction: 'Quadratic',
})
} else {
console.error('Couldn\'t create a clone. Did you forget to set entityToSpawn in the properties?')
}
})
},
})
