Searching for a UI Developer (Mobile) [[Simple]]

So, I guess I’ll go ahead and start this thread off with the story. The one that nobody cares about.

My name is Chris, I’m 19 years of age and I’ve been teaching myself Java on and off for a few years now, around a year ago I decided that I wanted to jump into Game-Development with Java, leaving the Unity3D Game-Engine behind. I picked up a few skills and extended my knowledge quite a bit, but I never really got around to finishing an actual game. I’m not sure why I stopped, I guess you can say I just lost the hype that I had for my own project. I didn’t have a reason to create it, or really a general idea of the direction I wanted the game to go, so after playing with it for awhile and learning how to do different things, it literally just became my programming sandbox.

I stopped working on things for a few months and decided that I wanted to start with application design. After awhile I have finally completed the core of my application and it runs exactly how I want it to; However there’s a simple problem. The way it’s presented.

I’ve taken numerous man-hours slaving over how I wanted to bring this game to life, what I could do to create a simple, yet addictive game-play that would bring people back for absolutely no reason whatsoever. I finally believe that I’ve found that game-play style.

Because of this reason and how simple it is, I won’t be releasing any details on the game itself until it’s completed, because I’m sure any experienced programmer could create a clone prototype in a few hours, but I’m not the experienced person everyone would want on their professional team. I’m just a teen learning.

-----------------------------------------------------------

Alright, so let’s cut to the chase.

Here’s the mock-up of the menus that I need created.

Basically what I need you to do is the following:

I need you to create an application that will have this UI setup working, obviously you’re not going to be able to incorporate anything like the actual games achievements or anything into the UI, but you can create a system that works with false data (Hardcoded).

Instead of making the game button load the game, make it load the game-over menu. This way I can understand how to go through menu transitioning.


I don’t have much money, but I do have expectations for this game to profit. If you require payment I’ll see what I can scrape up, but as I stated earlier I’m 19 without a job. All of the money I have goes towards school and a car-note and I get it through freelance work.

Thanks in advance,
Chris

import static com.badlogic.gdx.scenes.scene2d.actions.Actions.*;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.backends.lwjgl.LwjglApplication;
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Pixmap.Format;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label.LabelStyle;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton.TextButtonStyle;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.utils.viewport.ScreenViewport;
import com.badlogic.gdx.utils.viewport.Viewport;

public class Mockup extends ApplicationAdapter {
	static final boolean debug = true;

	Viewport viewport;
	Stage stage;
	Skin skin;

	Actor currentScreen;

	public void create () {
		viewport = new ScreenViewport();
		stage = new Stage(viewport);
		Gdx.input.setInputProcessor(stage);
		createSkin();
		setScreen(new MainMenu());
	}

	void createSkin () {
		skin = new Skin();

		// Generate a 1x1 white texture and store it in the skin named "white".
		Pixmap pixmap = new Pixmap(1, 1, Format.RGBA8888);
		pixmap.setColor(Color.WHITE);
		pixmap.fill();
		skin.add("white", new Texture(pixmap));

		// Store the default libgdx font under the name "default".
		skin.add("default", new BitmapFont());

		// Configure a TextButtonStyle and name it "default".
		TextButtonStyle textButtonStyle = new TextButtonStyle();
		textButtonStyle.up = skin.newDrawable("white", Color.DARK_GRAY);
		textButtonStyle.down = skin.newDrawable("white", Color.DARK_GRAY);
		textButtonStyle.over = skin.newDrawable("white", Color.LIGHT_GRAY);
		textButtonStyle.font = skin.getFont("default");
		skin.add("default", textButtonStyle);

		// Configure a LabelStyle and name it "default".
		LabelStyle labelStyle = new LabelStyle();
		labelStyle.font = skin.getFont("default");
		skin.add("default", labelStyle);
	}

	public void render () {
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		stage.act();
		stage.draw();
		Table.drawDebug(stage);
	}

	public void resize (int width, int height) {
		viewport.update(width, height, true);
	}

	void setScreen (Actor newScreen) {
		int screenWidth = Gdx.graphics.getWidth();
		if (currentScreen != null)
			currentScreen.addAction(sequence(parallel(moveBy(-screenWidth, 0, 0.750f), fadeOut(0.750f)), removeActor()));
		currentScreen = newScreen;
		stage.addActor(newScreen);
		newScreen.setX(screenWidth);
		newScreen.getColor().a = 0;
		newScreen.addAction(parallel(moveBy(-screenWidth, 0, 0.750f), fadeIn(0.750f)));
	}

	class MainMenu extends Table {
		TextButton challenge30sButton, challenge1mButton, challenge5mButton, achievementsButton, highScoresButton;

		public MainMenu () {
			super(skin);
			if (debug) debug();
			createWidgets();
			createLayout();
			createEvents();
		}

		void createWidgets () {
			challenge30sButton = new TextButton("30 Second Challenge", skin);
			challenge1mButton = new TextButton("1 Minute Challenge", skin);
			challenge5mButton = new TextButton("5 Minute Challenge", skin);
			achievementsButton = new TextButton("Achievements", skin);
			highScoresButton = new TextButton("High Scores", skin);
		}

		void createLayout () {
			setFillParent(true);
			add("Game Name").row();
			pad(10).defaults().space(10).fillX();
			add(challenge30sButton).row();
			add(challenge1mButton).row();
			add(challenge5mButton).row();
			add(achievementsButton).row();
			add(highScoresButton).row();
		}

		void createEvents () {
			ClickListener gameOverListener = new ClickListener() {
				public void clicked (InputEvent event, float x, float y) {
					setScreen(new GameOver());
				}
			};
			challenge30sButton.addListener(gameOverListener);
			challenge1mButton.addListener(gameOverListener);
			challenge5mButton.addListener(gameOverListener);
			highScoresButton.addListener(gameOverListener);

			achievementsButton.addListener(new ClickListener() {
				public void clicked (InputEvent event, float x, float y) {
					setScreen(new Achievements());
				}
			});
		}
	}

	class Achievements extends Table {
		ScrollPane scroll;
		Table itemsTable;

		public Achievements () {
			super(skin);
			if (debug) debug();
			createWidgets();
			createLayout();
			populate();
		}

		void createWidgets () {
			itemsTable = new Table();
			scroll = new ScrollPane(itemsTable);
		}

		void createLayout () {
			setFillParent(true);
			add(scroll).expand().fill();

			itemsTable.pad(10).defaults().fillX().space(10);
		}

		public void populate () {
			ClickListener mainMenuListener = new ClickListener() {
				public void clicked (InputEvent event, float x, float y) {
					setScreen(new MainMenu());
				}
			};
			for (int i = 0; i < 50; i++) {
				TextButton button = new TextButton("Achievement " + (i + 1), skin);
				itemsTable.add(button).row();
				button.addListener(mainMenuListener);
			}
		}
	}

	class GameOver extends Table {
		TextButton submitButton, shareButton, againButton;

		public GameOver () {
			super(skin);
			createWidgets();
			createLayout();
			createEvents();
		}

		void createWidgets () {
			submitButton = new TextButton("Submit High Score", skin);
			shareButton = new TextButton("Share Score", skin);
			againButton = new TextButton("Play Again!", skin);
		}

		void createLayout () {
			setFillParent(true);
			add("Game Name").row();
			pad(10).defaults().space(10).fillX();
			add("Your score: " + MathUtils.random(10, 100)).row();
			add(submitButton).row();
			add(shareButton).row();
			add(againButton).row();
		}

		void createEvents () {
			ClickListener mainMenuListener = new ClickListener() {
				public void clicked (InputEvent event, float x, float y) {
					setScreen(new MainMenu());
				}
			};
			submitButton.addListener(mainMenuListener);
			shareButton.addListener(mainMenuListener);
			againButton.addListener(mainMenuListener);
		}
	}

	public static void main (String[] args) throws Exception {
		LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
		config.width = 320;
		config.height = 480;
		new LwjglApplication(new Mockup(), config);
	}
}

It is completely self contained, you just need to paste it into a libgdx project. Use it as a start to learn this stuff yourself!

I’m not using libgdx as I’m having a ridiculously hard time getting it setup on a linux machine.
My problem is with all of the XML that comes with the standard Java version of doing this.
I’ve decided to just use an approach where menus are drawn images, and I check the bounds on the TOUCH_UP event for menus.

This is probably not the best way to do it, but until I can get LibGDX working this seems like my only choice.
I’ve spent my last 9 hours reading up on a framework for android games, and they aren’t making it very easy on us.

The LibGDX Version looks very simple to use, but I feel like it shouldn’t be too different using the standard graphics that I’m using now that I’ve got the basics down. We’ll see.

Thanks for all the help! Going to reference this while trying to convert to standard and when I move to LibGDX

You didn’t specify you wanted the UI created with Java2D. If you are making a game, using Java2D is not the way to do it.

Classic! Going overboard to help somebody, getting a ‘nah’ as response :slight_smile:

I dont follow ._.
whats the connection between linux and libgdx ?

Maybe he is developing on freaking SOLARIS =D

When will I learn? ???

Well, at least you got to plug the ease of use of LibGDX, disguised as an overly helpful post, right? :slight_smile: And I got a freaking medal by playing along! Win-Win!

Haha :smiley: Nah, everyone knows scene2d is hard to use. And table? WTH is a table?!

:cranky: Go home.

The connection is I can’t get the project to setup correctly, and when importing the gradel project into eclipse, it totally craps all over itself.

This is what all of the tutorials I’ve been reading so far have showed. Hundreds of pages wasted if this is the case. Besides, this game isn’t going to be anything like you’d envision a game to be, it’s basically just a standard app, but I’m presenting it as a game. There aren’t any animations, or sprites moving around, so I figured this would be fine. If it’s not could you please explain why?

I didn’t give him the nah response, I’m actually very grateful for what he did and it helped me understand how to do things on the LibGDX Side, which is great. I used LibGDX a little when I was on windows.

Try to focus on this problem for now and provide us a little more info. I really recommend fixing this, because libGDX will be a very good choice for you in the end. You’ll be glad that you got it fixed :wink:

Al-right, will do. I’ve tried everything that I know how though, including a reinstall of eclipse. I’ll continue to google the issue, but it’s not very well known.

I finally got LibGDX working and I’ll be using nates example to learn from. Thanks again nate!

Having some problems with the size, the buttons are rediculously small and I’m trying to make them larger.

Here’s what I’ve tried

btnPlay30s = new TextButton("30 Second Challenge!", game.getSkin());
		btnPlay30s.setSize((Gdx.graphics.getWidth()) - (Gdx.graphics.getWidth() / 4), Gdx.graphics.getHeight() / 8);

I’ve also tried the setScale, but it’s not changing.

RTFM

Where do you think I got the information I used? I didn’t pull it out of my ass. I figured it out anyway.

Well that escalated quickly

You asked for help before making reasonable effort yourself.

[quote]I never instruct those who aren’t full of passion, and I never enlighten those who aren’t struggling to explain themselves. If I show you one corner and you can’t show me the other three, I’ll say nothing more. -Confucius
[/quote]
This forum has a nice ignore feature. Best of luck!