How to put an image (static) in place of black loading screen?

Post reply
0 favourites
  • 5 posts
From the Asset Store
Forgotten Place
$4 USD
Forgotten Place - Melodic ambiance, background music, Synth
megatronx's avatar
megatronx

  • I have made a game (it is a huge project for me) and its size is approx 85 MB. Everything is going fine except one problem (on which i have burned SOLID 48 hours figuring out the issue) .Whenever I open my app in the mobile it first shows a black screen for 20 seconds.

    So friends (although I am still working on the issue in separate post) is there any way to replace the black loading screen with an image? My problem would be solved !!!

    (Please don't mention 'loader layout'.It is basically worthless for mobile platform )

    What exactly is happening

    black screen for 20 seconds--> progress bar and logo appears for 0.25 second--> first layout appears(But otherwise the game is smoothly running)

  • did you solved the problem?

  • I think this will work:

    After Exporting, go to the root folder of your app.

    Here, keep your loadimage.png image file.

    The image should be as small as possible like 64*64 pixels or 128*128 pixels.

    Open and edit index.html with any text editor.

    Paste these lines just below <body> tag: 

    <img src="loadimage.png" class="myloadingImage">
<style>
.myloadingImage{
	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
	z-index: -1;
}
</style>

    Refer to this image ->

  • thanks, that helped.

    and i added some scc to simulate loading progress 

    <div class="load">
<img src="icons/loading-logo.png" class="myloadingImage">
<div class="loader-border">
<div class="loader"></div>
</div>
</div>
<style>
.load{
	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
	z-index: -1;
}
.loader-border
{
	border: solid;
	height: 16px;
	width: 340px;
}
.loader{
 width: 4px;
 height: 16px;
 background: red;
 position: absolute;
 animation: 22s in-out forwards;
}


    KeyFrames in-out {
[/p]
 0% {
[/p]
 width: 0px;
[/p]
 }
[/p]
 5%,10% {
[/p]
	width: 10px;
[/p]
 }
[/p]
 40%,60% {
[/p]
 width: 200px;
[/p]
 }
[/p]
 80%,85% {
[/p]
 width: 280px;
[/p]
 }
[/p]
 100% {
[/p]
 width: 340px;
[/p]
 }
[/p]
}
[/p]
</style>

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Hi guys,

    According to the post below the construct 3 storyboard splash feature should work correctly. You can access this by opening the icons folder and adding your preferred images for foreground, background and storyboard splash, and assigning them the correct role in the properties viewer.

    Hi everyone.

    The Splashscreen feature (Storyboard), now works well now in Construct 3, on the latest update.

    The Adaptive Icons (Foreground + Background) was working all this time, at first it looked broken to me since it somewhat didn't scale like Android Studio.

    To make it scale in Construct 3, you need to match the size of both Foreground and Background. And, most especially, include the transparent areas to avoid it stretching.

    It doesn't have Android Studio icon tools, but I think this is already enough for most apps, and adds simplicity.

    construct.net/en/forum/construct-3/general-discussion-7/construct-talk-disadvantages-153846/page-3

Post reply
  • 5 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)