Lala - Now available in on Google Play

WIP games, tools & toy projects
#1

For longer than it should have taken me, I have been mucking about with a prototype for a game that is sort of a bridge-building kind of physics puzzle intended for young kids.

I am doing this partly because I wanted to try doing a game where hand-eye coordination isn’t the most important thing (like Hovercraft), and partly because I wanted to do a game that my kids can play (unlike Grapple, which got an age-rating of 13 and up because of the blood :persecutioncomplex:).

So with my daughter’s “help” I’ve been building Lala, a game about helping aliens from planet Lala to reach their space-ships so that the can get back home.

It’s available for download on Google Play!
The game is free, has no ads and there are no in-game purchases.

If anyone wants to try the desktop version (which I mainly used for ease of development) it can be downloaded from here; Lala desktop version.

Game trailer;

mVVZ-IUYYHQ

The game is, as I am guessing most of you can see, based on Kenney’s tilesets and it will when (if) finished have five different types of aliens, in five different environments in sixty different levels.

After Hovercraft I promised myself my next game wouldn’t be one where I had to do a lot of level design. I broke that promise with Grapple and I am already regretting it :slight_smile:

Game play will be about dragging blocks to make it possible for the alien to go from the left side of the screen to the right, where his space-ship is waiting.

The player does not directly control the alien, it’s all about building by placing blocks.

Basic game play is implemented, but it’s still a far away from being finished (I am sort of hoping that if I run a devlog here it will push me to finish it).

Main platform will be Android, but since I am using libGDX a desktop version might also come out of it. I am using Box2D for the physics and the levels are made using Tile Map Editor to create the levels.

Any feedback is greatly appreciated.

#2

I really like this idea for little kids…a nice idea that’s not too difficult. And I bet kids will get satisfaction out of seeing the alien able to walk across the screen.

#3

Yeah, I think making sure that it is not too difficult and that the chance of getting stuck is low is important when your target age group is 3-6.

The game will have the normal sort of “unlock” mechanism where you get access to the level 2 only when you’ve completed level 1, but after the first sort of tutorial levels completing a level will unlock more than just one other level.

I am hoping that doing it that way will make it feel like there’s more choice will there still is an incentive to try to complete all levels.

#4

For building the UI for the menu and on-screen controls I am using Scene2d, which is libGDX’s way of composing screens using Actors and Actions.

While I am not the biggest fan of the way layouts are handled, the way you can add animations to your UI elements is really cool.
By adding Actions to Actors most transforms (and other manipulations) becomes easy to add and fine-tune.

To make the level selection buttons fall in like the example above I simply need to add an action for it;


float timing = MathUtils.random(0.8f, 1.0f);
button.addAction(moveTo(xPos, yPos[row], timing, Interpolation.sine));

The timing variable is the amount of time the entire animation will take and it’s set to a random value so that all the buttons fall in at slightly different speeds.

As the “old” level selection buttons needs to be removed from the scene when they’ve fallen off the screen I utilize the sequence Action which conveniently allows me to stack a series of Actions to be executed in order;


float d = MathUtils.random(0.8f, 1.0f);
button.addAction(sequence(
    moveTo(button.getX(), -button.getWidth(), d, Interpolation.pow4), 
    Actions.removeActor()));

This way the animate (with interpolation of my choice), to a position that is below the bottom of the screen (-button.getWidth() in this case) and then the next action of removing it is automatically executed for me.

Sometimes Actions needs to run in parallel, when a level is completed a star is added to the level that fades in and pulses, and the padlock of the next level is dropped whilst spinning;

Creating this effects are as simple as;


// Fade in and pulse the star
image.addAction(
    parallel(
        alpha(1, 1, Interpolation.sine),
        sequence(
            scaleTo(2, 2, 1, Interpolation.sine), 
            scaleTo(1, 1, 1, Interpolation.sine)))
);

// Drop and rotate the padlock
image.addAction(
    parallel(
        moveTo(actor.getX(), -image.getHeight()*2, duration, Interpolation.swingIn),
        rotateTo(180.0f * (RND.nextFloat() - 0.5f), duration, Interpolation.sineIn)));
#5

Hi,

happy to see your newest project after Grapple.
I like the idea, also the effects when you complete a level look really cool. But I think the background in the menu is moving a little bit too fast to the left, maybe you can play with the velocity there.

I can’t wait to see more game-play and how you handle it easy enough for little kids :wink:

#6

Point taken, I’ve adjusted this down a bit to make the menu look less hectic.

Hopefully I’ll be able to show off more of the UI and, I am struggling a bit with the conflict between allowing many different actions whilst at the same time being intuitive enough for kids so I’m interested in any feedback I can get in this area.

#7

I am working on the HUD and I want to use big, easy to hit buttons that will suit kids.

The buttons are arranged so that the most frequently used ones are at the bottom. On the left are controls for controlling the alien (i.e making him go or stop/restart) and also a button for clearing any blocks placed.
On the right are controls for rotating and mirroring the blocks.

Currently I have no touch-gestures for rotating and/or mirroring, only to move the blocks around but this might change if it looks like that’s a more natural way of manipulating the blocks.

The blue tray thingie at the bottom center is where the available blocks are, it auto-hides when a block is being moved or the alien is walking.

#8

As I said in my initial post I am using Box2D for this. The reason for this is partly getting collision detection for free but also because I want a badly built bridge to topple and fall over in a manner dictated by physics.

Since I want the alien to interact with the blocks I needed a way to represent him as rigid body and a way to make him move.

For Grapple when solving a simular problem I used a capsule (circle for feet and head with a box in between) that I pushed in the direction the player wanted to walk, but for this game that didn’t work out as well.

It caused the alien to push some blocks around and it was messy constructing the levels.

Instead I decided to represent the alien as a sphere, and instead of pushing it I add torque to it.

So when the game looks like this;

It is actually doing this;

I am hoping the fact that the circle’s shape doesn’t correlate perfectly to the shape of the alien won’t get in the way of this approach :persecutioncomplex:.

#9

To make the screens more visually appealing I have been adding more things that move, clouds now drift across the sky and leaves blow off of bushes. And on some levels there are flies or bees that fly away when the player gets too close to them.

I am using the libGDX particle editor almost exclusively to create these effects, it’s somewhat limited but it allows me to quickly tweak and adjust the various effects.

https://i.imgur.com/oQfpwJy.gif(image larger than 102400KB)

The “smoke” from the UFO and the stars falling are also particle systems.

#10

Oooh neat.

Nice job on this, but I want to add that 3-6 year olds don’t care about unlocking things

They just want to feel accomplished in what they have so when they say, “hey daddy look” daddy could be proud of the youngin.

I am a reliable source of information. I have experience being that young :point:

#11

Thank you!

I sort of disagree with you point about kids not caring about unlocking things, at least the older part of my target age group does, I think.

Either way, I take your point and the unlocking mechanism won’t be the traditional “finish level N unlocks level N+1” approach. To make sure players don’t get stuck on one level most levels will unlock several others, so the should always be an ample supply of unlocked levels and chapters for them to try.

Possibly with the exception of the first 6 levels, where I want to make sure they go through all parts of the game play.

Thanks for the feedback!

#12

Ooh I like the quip. You have programmers wits about you :D. I like communities like this.

#13

In this game I use dialog-boxes for simple messages, for example instructions show at the beginning of a tutorial level;

With libGDX and it’s GlyphLayout it’s easy to construct these.

I construct the fonts as bitmap fonts, but I generate them at run-time using the FreeTypeFontGenerator as it means I can easily modify the fonts without having to re-process my assets;


public class FontAssets implements Disposable {
	public final BitmapFont dialog;
	public final BitmapFont menu_title;
	
	public FontAssets() {
		dialog = buildFont("fonts/Chewy.ttf", 48, 4, Color.BLACK, "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890\"!`?'.,;:()[]{}<>|/@\\^$-%+=#_&~*");
		menu_title = buildFont("fonts/Chewy.ttf", 128, 12, Color.BLACK, "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890\"!`?'.,;:()[]{}<>|/@\\^$-%+=#_&~*");
	}
	
	private static BitmapFont buildFont(String filename, int size, float borderWidth, Color borderColor, String characters) {
		FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal(filename));
		FreeTypeFontParameter parameter = new FreeTypeFontParameter();
		parameter.size = size;
		parameter.borderColor = borderColor;
		parameter.borderWidth = borderWidth;
		parameter.characters = characters;
		parameter.kerning = true;
		parameter.magFilter = TextureFilter.Linear;
		parameter.minFilter = TextureFilter.Linear;
		BitmapFont font = generator.generateFont(parameter);
		font.getData().markupEnabled = true;
		generator.dispose();
		return font;
	}

	@Override
	public void dispose() {
		dialog.dispose();
	}
}

When using the font I first set the GlyphLayout to the text I want;

	public void openDialog(String text) {
		dialogEnabled = true;
		float dw = vWidth * 0.8f;
		dialogGlyphLayout.setText(Assets.instance.fonts.dialog, text, Color.WHITE, dw, Align.topLeft, true);		
	}

Here vWidth is the virtual or logical width of the screen, and I am telling the GlyphLayout to render at 80% of the width of the screen and wrap if longer.

Then, when rendering the Stage the text and it’s background is rendered like this;


		if (dialogEnabled) {
			spriteBatch.setProjectionMatrix(stage.getCamera().combined);
			spriteBatch.begin();
			
			float tw = dialogGlyphLayout.width;
			float th = dialogGlyphLayout.height;
					
			float dw = tw + 0.05f * vWidth;
			float dh = th + 0.05f * vWidth;
			
			float bx = (vWidth - dw) / 2.0f;
			float by = vHeight - dh * 1.2f;
			
			Assets.instance.hud.panel_metal.draw(spriteBatch, bx, by, dw, dh);
			Assets.instance.fonts.dialog.draw(spriteBatch, dialogGlyphLayout, bx + (dw-tw) / 2.0f, by + dh - (dh-th) / 2.0f);
			
			spriteBatch.end();
		}

This sets up a nine-patch which is the background to have a 5% padding, and then draws the message.

To get the different words highlighted requires no special code as the input string can be marked-up to change color;


[WHITE]DRAG THE WOODEN BOX TO THE [BLUE]GAP[WHITE] TO LET THE [GREEN]ALIEN[WHITE] CROSS.

Super simple.

#14

The game has three types of materials for the blocks:

  • Wood

  • Metal

  • Stone

Initially these were just used to provide visual variation (and to a certain extend audio variation as well as the sound of the alien’s footsteps changes depending on what he’s walking on), but I’ve now started experimenting with having different densities associated with these materials.

So for example wood Wood being lighter than Stone leading to the right block tipping over if the following puzzle is attempted with the Stone on the left side and Wood on the right side:

https://i.imgur.com/q2KYJpR.gif(image larger than 102400KB)

But, if the right block is the heavier Stone block, it provides enough counter-weight to the Alien and does not tip over:

https://i.imgur.com/YfUodJE.gif(image larger than 102400KB)

I am not sure if I’ll just this sort of mechanic in the final version of the game though, it might be too complicated considering the age group I am targeting.

#15

To be fair, I think in that first gif the alien could have finished the level without minding about the tipping wood block. :wink:

#16

These aliens have very sensitive feet, upon the slightest injury inflicted they rather teleport back and start again.

They are clearly not the smartest creatures in the universe, but that also explains why you have to help them traversing the rather simple levels :slight_smile:

#17

Added winter levels, with snow.
Well, I say snow, it looks more like blurry rotating plus-signs.

Also half-buried candy canes.

#18

Love the visual atmosphere you’ve got running :o

#19

Thank you!
I wish I could take credit but almost all the graphics is produced by Kenney.

#20

I am close to done with the levels, I only have two more to do and then some tidy up. Starting to see the end of this.

I made a gameplay video, any comments on the game play mechanics are greatly appreciated:

FlM943xaxyw