next »

[Trilaterus]

HPEngineCubed
View the code on GitHub!




Sprites from Scott Pilgrim VS the World but setup in this window by me!

This is an engine/framework made with SFML to create 3 specific games (and hopefully more!) by me; Hussain Patel!

The end result is to be able to create a side scrolling 2D fighting game (similar to Scott Pilgrim VS the World or Castle Crashers).

Although that'll take forever, so during the development as core features are being added I'll try to make a game with the few features it has.

Not only will this keep itching my need for designing and pushing out games, but it will also run my engine through a cycle of developing a game allowing me to identify issues in a low cost environment.

The first game planned is a Point and Click / Text based adventure game, some of the features include (but are not limited to):

• Properly anchored UI elements to allow for support on multiple screen sizes [Donezo!]
• A semi-stack like Screen system to efficiently change screens with transitions [Donezo!] (and have overlays within screens!) [Donezo!]
• Animations handled via both spritesheets and programmable movements (sin movement, shake movement etc.)[Donezo!]
• UIElements working: UIImage, UIButton, UIButtonList, UIText (names subject to change)
• Basic audio manipulation... Having BG music and SFX implemented without memory leaks (using smart pointers probably!)

The second game is a 2D fighting game (similar to Tekken or Street Fighter).

And last (but not least!) is a 2D sidescrolling fighting game, as explained above!

Here I'll post about features added to the engine, until it has enough to develop Game 1! Then I'll post updates regarding the development of that game.

You can see more of my work on my portfolio, I recommend checking out Hold On! as it's my most completed game to date and of course a ton of fun!

Thanks for reading!


Below are my current features, I'll make separate posts when features are complete. For more hopefully consistent but incomplete updates you can watch me on GitHub!

If you want to see what I'm working on in an agile style then check out my Taiga backlog and have a peek at my latest Sprint contents.

(If someone knows how to tag spoilers please let me know, images are cool but they take up a lot of space! Kind of like this text asking if there are spoiler tags and what they are and how to add them...)


UIElements can be anchored to the screen and their origin point, demonstrated with a working UIImage

Code:

UIImage logo = UIImage("logo_shadow", m_Window, UIPosition());
UIImage logoLeft = UIImage("logo_shadow", m_Window, UIPosition(UIAnchor::LEFT));
UIImage logoTopRight = UIImage("logo_shadow", m_Window, UIPosition(UIAnchor::RIGHT | UIAnchor::TOP));
UIImage logoBotLeftCentre = UIImage("logo_shadow", m_Window, UIPosition(UIAnchor::BOT | UIAnchor::RIGHT, UIAnchor::CENTRE));

// UIImage (Texture Name, Reference to Window, UIPosition(Screen Anchor enum(s), Origin Anchor enum(s), X Offset, Y Offset));

Animations are based on spritesheets and programmed movements

Code:

UIImage scottLeft = UIImage("newSpriteSheet", m_Window, UIPosition(UIAnchor::LEFT, 400.f));
scottLeft.setTextureAnimationSpeed(8);

UIImage scott = UIImage("newSpriteSheet", m_Window, UIPosition());
scott.setTextureAnimationSpeed(8);
scott.setTextureAnimation("Run");

UIImage scottRight = UIImage("newSpriteSheet", m_Window, UIPosition(UIAnchor::RIGHT, -400.f));
scottRight.setTextureAnimationSpeed(8);
scottRight.setTextureAnimation("Run");
scottRight.chooseProgrammedAnimation().setSinMovement(SinMovement(0.f, 0.f, 30.f, 1.f));
scottRight.chooseProgrammedAnimation().setShakeMovement(ShakeMovement(10, 8.f));

Could probably do with changing how you call the programmable animations, not sure why I've done it like that :S Also totally not my sprites or animations! They've been taken from Scott Pilgrim VS The World, seemed right to test it with a 2D sidescrolling beat-em-up.


Transitions between screens, wait that also means a stack based screen system!

Code:

// In MainMenuScreen:
SceneManager::getInstance().pushScreen(new OptionsScreen(m_Window), FadeColour());

// In OptionsScreen:
SceneManager::getInstance().popScreen(FadeColour());

[Trilaterus]

Simple Overlay system added

I decided against adding animations to the Overlays, not only was it quite difficult to figure out but I couldn't think of times I'd want an animated intro to my pause screen... In any case I could always add to it if need be!

Code:

// In MainMenuScreen:
SceneManager::getInstance().pushOverlay(new TestOverlay(m_Window));

// In TestOverlay:
SceneManager::getInstance().popScene();

Taiga support... Wait what's that?

Taiga is an free agile development tool. Unlike GitHub which allows me track what I've done, Taiga also allows me to plan tasks in advance. I can add a code to my commits to automatically change the state of the tasks which also semi-links them together.

The idea of adding this is to help me make each commit for a single purpose, and keep a record of why changes where made, as well as track my progress in features completed (rather than commits made).

If you want to see directly what I'm working on and what I will probably work on next you can check out this link and look at the tasks in the current Sprint.

At some point I may remove support for Taiga, hopefully it improves productivity but we'll have to see!

[Trilaterus]

UIText basic features complete!

So unfortunately after a week of working on getting text to display (with the appropriate features such as the standard anchoring, text alignment and extendable 'tag' modifiers) I came to a result I was deeply unsatisfied with.

Oh well! I kind of dived in head first with an idea I was really sure would work. In the end it didn't so I'll have to scrap most of that text rendering code. But at least I learnt a lot about how SFML handles text and how fonts work in general.

This image sums up my frustrations. For various programatical reasons I couldn't get the text to be perfectly in the centre (vertically, horizontally I think it was just about right). Also the text would get cropped at the bottom and the quality of the text itself was pretty bad. Along with a whole host of problems with other more calligraphic fonts.



On the bright side I got a basic tag system working and I figured out alignment (a little bit!). Not sure whether to drop this for now and work on something else, or just power through and keep going till it's done...

Code:

// In TestOverlay:
UIText centreAlign = UIText("Lin", m_Window, UIPosition(), UIText::Alignment::LEFT);

centreAlign.setText("Normal colour, <c 123 213 123>different colour, <c 1 2 3 150>colour<br>transparency,</> prev colour,<br></> normal colour");

From an agile development perspective I also messed up a little with my task setting. I should have gotten basic features working first (such as positioning) and then added the flair of the tag system and alignment.

Lots of lessons learnt!

[Trilaterus]

UIText basic features complete! For real this time!

Aha! I agonised over the code for a couple days (even posting to the SFML forums to query some results) and I got the text to state I'm happy with!



The only issue is that this one font (PixelType?) is not working properly... But I'm not letting that hold me back. If the issue crops up (heh) with more fonts then I'll look into it then. Instead now I can focus purely on UIButtons!

Code:

// In TestOverlay:
UIText centreAlign = UIText("Hemi", m_Window, UIPosition(), UIText::Alignment::CENTRE);
centreAlign.setText("Normal colour, <c 123 213 123>different colour, <c 1 2 3 150>colour<br>transparency,</> prev colour,<br></>normal colour");
m_AllUI.push_back(std::make_shared<UIText>(centreAlign));

UIText topLeft = UIText("Lin", m_Window, UIPosition(UIAnchor::TOP | UIAnchor::LEFT), UIText::Alignment::RIGHT);
topLeft.setText("This text is aligned properly even though one line<br>is way longer!");
m_AllUI.push_back(std::make_shared<UIText>(topLeft));

UIText botRight = UIText("M12 edited", m_Window, UIPosition(UIAnchor::BOT | UIAnchor::RIGHT), UIText::Alignment::CENTRE);
botRight.setText("<c 255 50 50>Even this is aligned!<br>And its colour is applied without an end tag");
m_AllUI.push_back(std::make_shared<UIText>(botRight));

UIText botLeft = UIText("Pixeltype", m_Window, UIPosition(UIAnchor::BOT | UIAnchor::LEFT), UIText::Alignment::CENTRE);
botLeft.setText("For some reason<br>this doesn't work?<br>Sad face :(");
m_AllUI.push_back(std::make_shared<UIText>(botLeft));

[Trilaterus]

UIButton core features working

I got the sprites for the button from the site Kenny. There are just so many useful assets here it would be crazy to not look at. For prototyping it's a really neat way of having good looking and consistently themed graphics.

Now this is done I don't have to use the arrow keys to switch screens ^^



We are getting dangerously close to being able to develop the first game from this engine... Oh wait I need to do audio >_<

Code:

// In MainMenu:
void MainMenu::handleEvents(const sf::Event& event)
{
	m_pButton->passEvent(event, m_Window);
}

void MainMenu::handleOptionsButton()
{
	switch (m_pButton->GetState())
	{
	case UIButton::RELEASE:
		m_pButton->setTextureAnimation("Idle");
		SceneManager::getInstance().pushScreen(new Screens::Options(m_Window), new Transition::FadeColour());
		break;

		case UIButton::CLICK:
		m_pButton->setTextureAnimation("Click");
		break;

	case UIButton::HOVER:
		m_pButton->setTextureAnimation("Hover");
		break;

	case UIButton::IDLE:
	default:
		m_pButton->setTextureAnimation("Idle");
		break;
	}
}

[Trilaterus]

Textured cursor and UI changes

More sprites stolen used made by the wonder people behind Kenny!. This time using a UI pack I've created a textured cursor, which allows me to make UI more naturally intuitive.

I also made some changes to how to UI can be positioned allowing me to relatively easily position elements based on other elements.