• Register

An Island survival sandbox game. Build up your resources, build your shelter, fish and hunt for food and just stay alive. Early development, missions/achievements/story to come later.

Post news Report RSS LibGDX Cut Scene Prototype

Started work on a simple cut scene or slide show class to help prototype. Show an array of images with fade in and fade out.

Posted by on

Currently working on a game for Wing Wing Shoot Bag using Java with LibGDX. While trying to learn Pixel/Game art I produced a few animated GIFS, one of which would be perfect for the main screen. This concept will be developed further and used within Endure.

Being a little lazy I thought of loading in the individual images and looping through them rather than create one large image and cut it up programmatically for an animation. This worked, I had created a sort of slide player.

After pressing start within the game menu I wanted the current frame to pause and fade out, then the intro of the game would play. The intro follows the movie to which the game is based, several images would fade in, hold then fade out.

Fading in and out
First off I needed to find a way to fade an image in or out, there is a library available to do this: Code.google.com

I followed the guide and setup a Sprite Accessor class: Class source

Slide Manager
Next I created a slide manager class, this would hold an array of slides which could have some simple attributes:

  • sprite; // The image
  • fade_duration // Time to fade in or out
  • hold_duration // Time to hold slide on screen after fade in
  • total_duration // time for fade in, hold and fade out
  • gap_duration // time between slides

Classes: Slide Class - Slide Manager

Creating and using the Slide manager
Basically you initiate the new class then add to the array of images with some settings. During the render loop you tell the class to update and it will play your images in order; fading them in and out.

// Declare a new var
SlideManager slide_manager;

// Slides
slide_manager = new SlideManager();

// Add slides that fade in for 4 seconds, holds for 1 seconds
// After fade out leaves a gap of 1 seconds before next slide

slide_manager.add_slide(new Slide("intro/screens/russian.png", 4, 1, 1));
slide_manager.add_slide(new Slide("intro/screens/spy.png", 4, 1, 1));

// Add a slide with an overlay animation
// Passes animation width, speed and position
slide_manager.add_slide(new Slide("bck.png", 2, 0, 1, "frames.png", 70, 0.1f, 45, 25));

I started playing about with a few variations of slides, would probably move the extras such as animations into an array and create a new animation class to pass with the slide.

This is a render loop for the intro screen, when the slides are done it just loads the next screen:

public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
slide_manager.tick(delta);

// DRAW
batch.begin();
if (!slide_manager.finished){
slide_manager.draw(batch);
}
batch.end();

if (slide_manager.finished){
game.setScreen(game.level_one);
}
}

This is a very quick prototype which only allows simple fading in and out and overlaying of one animation. It requires a library to be imported even though setting the colour(Alpha) of a sprite over time is very simple I could go on to use many more of the libs features.

This class will allows me to quickly create simple comic book style cuts scenes between levels while prototyping.

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
Endure
Platforms
Windows, Mac, Linux
Creator
carelesslabs
Engine
libGDX
Contact
Send Message
Release date
Game watch
Follow
News
Browse
News
New
Post news
Report
Report
Share
Related Games
Endure
Endure Adventure
Related Engines
libGDX
libGDX Commercial