Forums » Help » Loader question

Hello everyone. I wanted to give credit to a few people by putting their logos up after the loader has finished, I found it convenient and a kind of opening to the game. How would I be able to accomplish this. There is an example down below of what I'm talking about:

Pokemon Opening

As you can see in the video, the "Game Freak" symbol pops up in the opening and then the start screen is shown. What I would like to make is the Game Freak part except with my logo, and no fancy animation just my logo and a few logo's of other people that I'm giving credit to, to just fade in and fade out and when the last one fades out the start screen pops up.

a vERY easy way to do it would just to make a level called like "splashscreen" or something, make a few entities with the logos for their animations, and arrange it in weltmeister with no collision or background layers. just an entity layer.

then have it load the splashscreen level, display your logos, then after a few seconds load a new level.

that's probably the absolute easiest way.

What SlouchCouch said. Except if you don't want the animation you wouldn't even need entities for the different logos - just put all the logos in the background for the splashscreen level and pop it in as a tileset in Weltmeister.

you could have a "intro" gamestate.
and just set the clear color to null. and just draw the image on screen.
and then set a timer to draw different images.
and then set the timer to change game state to your main game.

@SlouchCouch That's a great Idea, sorry for the delayed reply I was doing some work.

@Lazer & Mimik Thank you both for the suggestions, I'll try somethings out, and maybe make a plugin for the Impactjs community if possible. I got an idea. I'll be experimenting for the next few weeks.

I've seen some game accomplish this by placing an image during the loader, but it would only allow one image since the loader only cycles once. So it does make sense to put the the game company intro after the loader, and maybe implement it on to the game through a gamestate as mimik explained. Then after a specific timer, it could move onto another gamestate (i.e Startscreen/Credits/etc...). I hope I can make this possible. I've seen such a thing accomplished in "Cross-Code", but the person who made the game changed up the engine a bit to suite his game better.

I used a splash screen for Saving Circles music credits. With SlouchCouch's idea. you can also increment the alpha up and down for the splash entity which is how I wrote my updates to load the next level deferred. I think I used a boolean property defined on the entity called something like fadedIn. I then used the code below or something like it to fade in, out and then load a level/another splash

if(this.fadedIn==false)
{
  this.currentAnim.alpha+=0.2;
}
if(this.currentAnim.alpha>=1 && this.fadedIn==false)
{
   this.fadedIn=true;
}
if(this.fadedIn==true && this.currentAnim.alpha>0)
{
   this.currentAnim.alpha-=.02;
}
if(this.fadedIn==true && this.currentAnim.alpha<=0)
{
//load something else
}

note that this is all off the top of my head and I don't have my code for that game with me @the office :)

I approached this in the same way that mimik suggested. As mentioned, this way works if you do not need animations (does not use entities). An example of this would be my implementation for my game Dodge that Keg. It simply shows the splash image for a fixed time and then switches over to the main game.

SplashScreen = ig.Game.extend({
		background: new ig.Image('media/game1/splash/background.png'),
		icon: new ig.Image('media/game1/splash/1GAM-icon.png'),
		logo: new ig.Image('media/game1/splash/1GAM-logo.png'),
		timer: new ig.Timer(),

		init: function(){
			this.timer.reset();
		},

		update: function(){
			if(Math.round(this.timer.delta()) > 2){
				ig.system.setGame(InstructionScreen);
			}
		},

		draw: function(){
			this.background.draw(0,0);
			this.icon.draw(ig.system.width/2-32, ig.system.height/3);
			this.logo.draw(ig.system.width/2-384, ig.system.height/3 + 84);
		},
	});