[SOLVED] How do I code a Logo opening & title Screen

Help & Support
#1

I want to Make a team logo opening but here’s a problem i don’t know how to do this the Sonic Canvas Engine was created 11-12-2021 for the intro Logo opening i want to use this image for the intro logo opening.

Sonic Canvas
Sonic Canvas1920×1080 97 KB

For example watch this video

Then i want it to fade out and show the loading screen then from there show the Menu screen and have a play button to play the game and a options Button to change a few things the player prefers & play some background Music.

The link to my Project
https://playcanvas.com/editor/scene/1271510

#2

Hi @Drayden_Little! I have replaced your topic as it is not related to collaboration. Also be careful with using custom logos in combination with names like PlayCanvas, Sonic and Sega as there are rules about using their names. To create a custom loading screen you can check the page below.

https://developer.playcanvas.com/en/user-manual/designer/loading-screen/

#3

The Sega video was just a Example so people could just get a idea

#4

I was referring more to your picture.

#5

Oh ok ill be really careful

#6

Is it possible playcanvas can find one of your assets and just make that image the loading screen if you use code

#7

I don’t think that’s possible, because I think at that point the assets are not loaded yet.

#8

huh you know they really should add that to make life easier

#9

You can upload your image on a cloud storage and use the link of it.

#10

ok well i already knew if i found the image online and opened it in a new tab once the loading screen is done it would just look like if i opened it in a new tab

#11

or i could just open up the inspect tab and get the direct link to the image

#12

Yes, that can be a less neat way.

#13

oh look i have 5000 iq direct link

Screenshot 2021-11-13 12.42.16 PM

#14

I don’t know what you mean. Does it solve the problem of your topic?

#15

sort of but the screen is so small you can barely see it

#16

I think you have to play with the part below to change that.

    '#application-splash {',
    '    position: absolute;',
    '    top: 42%;',
    '    width: 10%;',
    '    left: 45%;',
    '}',
#17

Heres my problem

blob:chrome-untrusted://media-app/dcc1e079-726c-4be2-82ca-99f85f283632

#18

correct it moves the screen but i need it to be zoomed in the width of the image is 498 and the height of the image is 280

#19

If you change the value of width you change the size of the image.

#20

This makes no sense at all