Page 1 of 5

Animated Sprites for the Chili framework?

Posted: July 25th, 2017, 10:24 am
by albinopapa
https://github.com/albinopapa/chili_framework

Hi, everybody!

So I got hung up (bored) with the Pong thing for now, and after writing the example code for state machines on another thread, I got to thinking about sprites and animated sprites and so forth. Figured I'd share what I've got done so far. If you came for the Sprite/Animated Sprite stuff check out the Sprite branch. I have been marking progress with branches instead of Tags like chili, haven't figured that out.

Currently, the sprites are opaque, next step is alpha blending to support transparency.

If you run it, you can see why the need for transparency. I have included some renders for demoing the progress. To play the animation, just press and hold the right arrow key. When you do, the character starts walking in place, and when you release, the character stops and changes poses. There aren't any comments, but the variable names and such should be self explanatory...hopefully.

If anyone checks it out or uses it in their projects, please share, I'd like to see what comes of it.

The image formats supported are bmp, jpg and png. There's no error handling, so if you get the filename wrong, it'll crash with not much info. The filenames of the images must be labeled as part of a series; example: image00.png, image01.png, image02.png,... upto image99.png. I only allowed for 2 numbers at the end of the filename, so 100 images per animation max. I'd like to use the experimental Filesystem library, but not right now. It would allow for searching a directory using wildcard characters. So you could do Frames( "/images/image*.png" ) and collect the number of files and if sorted, load them that way.

Any questions, let me know.

Re: Animated Sprites for the Chili framework?

Posted: July 25th, 2017, 9:29 pm
by albinopapa
As promised, just pushed the changes to the AlphaBlending branch.

Features added include:
Alpha-blending.
I tested using PNG files. JPG as far as I know doesn't support an alpha channel and I'm not sure if it will work with 32 bit BMP files or even load for that matter.
Reverse drawing
This way you only need to load right facing or left facing images, and the DrawReverse will mirror the image.

Alpha blending is more CPU intensive so expect debug runs to possibly be unplayable. It will depend on how large the image is and how many you have on screen. For background images or solid images just use the Frames::SpriteType::Solid enum when loading your sprites.

This post is all about the sprites so now that I've finished the alpha blending, wondering what to do next. Chili's 3D fundamentals tutorials covers rotations and rasterization, I'll probably grab his rasterization code from that framework to allow for sprite rotations. That way if you wanted to do a top down shooter or something, you could rotate the object. Looking back, I probably should have used that framework to begin with lol.

Chili covers all this in his old tutorial series.
  • Intermediate Series
    • He covers image loading and creating sprites and animated sprites, alpha blending, and 2D camera tracking.
  • Advanced Series
    • He covers vector and matrices math, rotation and rasterization of triangles for sprite rotation.
  • HUGS Series
    • He covers some circle-line and line rectangle intersection detection as well as paralax scrolling.
  • SSE Series
    • He covers graphics filters like bloom and fade.
About the only thing about this project that I've learned on my own so far is the image loading using the Windows Imaging Component API (WIC). So for all of you beginners, stick with chili, the man really knows what he's doing.

I really want to do add a camera system before doing the more difficult rotation and rasterization stuff, so..I'm off.

Re: Animated Sprites for the Chili framework?

Posted: July 27th, 2017, 1:14 am
by chili
Seems good. Hopefully somebody in need will take advantage of this and be able to make something with it. It's actually not that much longer in the new series before I start covering image loading and sprite stuff again.

Is pong officially dead? :D

Re: Animated Sprites for the Chili framework?

Posted: July 27th, 2017, 2:18 am
by albinopapa
Not dead, but I've run myself in circles with again " trying to be clever ". I should do something like what Yumtard did with his power-ups ( managers ), but I have been trying to implement the observer pattern and others with little to no understanding on how. Different tasks need different information even for observing the same action, so I get confused.

Perhaps for a side series, you could cover design patterns?

Re: Animated Sprites for the Chili framework?

Posted: July 27th, 2017, 8:34 pm
by albinopapa
Camera now implemented.

I created a base Camera and a child TrackingCamera. The tracking camera stores a const Vec2f& and uses it to update it's own position when Update() is called.

The camera can be clamped to a Rectf, which doesn't work the same as the _Rect::ClampTo function. The Camera::ClampTo function makes it so the view of the camera doesn't go outside the bounds whereas the _Rect::ClampTo function will resize the rect to fit inside of another.

There are two versions of the Draw and DrawReverse functions for AnimatedSprite, Sprite and AlphaSprite. One takes a single Rectf and the other takes two Rectfs. The former is for drawing the entire sprite, the latter is for drawing a portion of the sprite. I use it for clipping the background image, but could also be used for sprite sheets.

Re: Animated Sprites for the Chili framework?

Posted: July 28th, 2017, 7:09 am
by Zedtho
Just a quick question, can I download this framework and merge it with my already existing project? Also, will downloading it from the page be enough or do I need to look for the branch?

Edit: Thanks for answering the question!
Edit 2: What branch should I clone though? Because there currently are 5 branches. I think I should get Alphablending, because it is one commit ahead of Sprite, which probably means it is a branch of Sprite.
Edit 3: Nevermind! Think I got it. It goes Sprite -> Alphablending -> Camera -> Font_Directwrite
Edit 4: Do I need to copy over all of the files (except game.cpp and game.h) in Engine?
Edit 5: I already have a Vec2 file, but it's obviously different. Do your header files need your Vec2 file or can I use mine instead?

Re: Animated Sprites for the Chili framework?

Posted: July 28th, 2017, 7:22 am
by albinopapa
Zedtho wrote:Just a quick question, can I download this framework and merge it with my already existing project?
Copy over all of my files except for Game.h/Game.cpp to your project and you should be OK. I'd make a backup of your current project before doing it though, just in case something doesn't go well.

Re: Animated Sprites for the Chili framework?

Posted: July 28th, 2017, 7:48 am
by albinopapa
Fonts now implemented

The update is in the Font_DirectWrite branch.

I know it may be a bit confusing, but I designed it so you can't waste resources ( where there's a will there's a way though ).

You have to:
  • Create a DWriteInitializer object, this inits the dwrite api, this only needs to stick around long enough to create the Fonts, after that it can be let go ( automatically let go when goes out of scope ).
  • Create a TextFormat object, this defines and loads a font from your system fonts. I created a TextFormat::Properties struct that you can fill out or use the defaults to pass to the TextFormat constructor. The members of the Properties struct are things like size, fontname, style, weight and stretch
  • Create a FontSheet object, this holds the pixels and calculates what portion of the font sheet to draw based on the character that is passed to it.
  • Create a Font object, this does the actual drawing of the font from the font sheet.
With the exception of Font, once created, you won't interact with the rest directly. Font is the only class that needs to stick around. When you create a FontSheet, you must move it to the Font, so don't hold on to font sheets in other classes. It's probably not a good idea either to try creating a Font each frame. I wasn't thinking about changing fonts, so what you need to do is pre-load all the different fonts you want to use before you get to the main game loop.

Font has two functions, DrawChar and DrawString. I left it up to the user to convert numbers to strings. This is pretty easy to do with std::to_string( someNumber ). You can concatenate strings like

const std::string scoremessage = std::string("Your score: ") + std::to_string( score );

Let me know what you all think.

Re: Animated Sprites for the Chili framework?

Posted: July 28th, 2017, 5:45 pm
by albinopapa
Update

Realized I made creating a Font more complicated than need be. Now you just pass a TextFormat::Properties struct to the Font constructor and it calls the other classes for you.

Ex:

Code: Select all

	TextFormat::Properties props;
	props.fontname = L"Consolas";
	props.size = 28.f;
	m_consola = Font{ props };
or use the default values

Code: Select all

	m_consola = Font{ TextFormat::Properties()  };
defaults

Code: Select all

	struct Properties
	{
		std::wstring fontname = L"Consolas";
		DWRITE_FONT_WEIGHT weight = DWRITE_FONT_WEIGHT_NORMAL;
		DWRITE_FONT_STRETCH stretch = DWRITE_FONT_STRETCH_NORMAL;
		DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
		float size = 16.f;
		std::wstring locale = L"en-us";
	};
the locale = L"en-us" is United States english. You'd have to look up your locale code if you wanted different fonts. This might be helpful.

Re: Animated Sprites for the Chili framework?

Posted: July 28th, 2017, 5:52 pm
by albinopapa
Ooh, now that I think about it, changing the locale may not work. The way I set this up creates a font sheet that goes from ascii character 32 ( a space ' ' ) to ascii character 126 inclusive ( a tilde '~' ). Not sure how it will map to other languages.