[GAME] League of Evil 2 « cocos2d for iPhone

cocos2d for iPhone » cocos2d games

[GAME] League of Evil 2

(52 posts) (13 voices)

Started 5 months ago by ravenousgames
Latest reply from nf

Tags:

ravenousgames

12 Next »

ravenousgames
Member

The creators of the critically acclaimed League of Evil (Ravenous Games and WoblyWare) have teamed up with Bulletproof Outlaws to create League of Evil 2! BPO have been contracted to kick the graphics up to 11!

League of Evil 2 is building off the same engine with a proven formula of tight controls, short bite sized levels and fast action gameplay. We have totally revamped our graphics engine and are currently displaying some incredible hand illustrated animations that need to be seen to believe. All your favorite (or hated) enemies and hazards are back in the sequel as well as about a half a dozen new enemies and hazards. There will be over a hundred levels at launch spanning 5 environments.

We've created a custom animation system that use spritesheets along with XML files to define frames and timings. We're thinking of contributing that back to the community when we're all done with the game.

Posted 5 months ago #
varedis
Moderator

The new characters look great. I'm not sure that the level graphics quite match up to the new characters though.

I look forward to more updates.

Posted 5 months ago #

ravenousgames
Member

Thought I'd post an example of how the animation source looks / works:

animation = [[Animation alloc] initWithFilename:@"assets/animations/grenade_bot.xml"];
[self addChild:animation];

[animation playAnimation:@"idle"];

<?xml version="1.0"?>
<root spritesheet="assets/art/enemies/grenade_bot/grenade_bot.plist">
	<animation name="idle" fps="1" repeat="false">
		<frame filename="grenade_bot_idle1.png" delay="0" />
	</animation>
	<animation name="fire" fps="25" repeat="false">
		<frame filename="grenade_bot_shoot1.png" delay="2" />
		<frame filename="grenade_bot_shoot2.png" delay="1" />
		<frame filename="grenade_bot_shoot3.png" delay="1" />
		<frame filename="grenade_bot_shoot4.png" delay="1" />
	</animation>
	<animation name="destroyed" fps="1" repeat="false">
		<frame filename="grenade_bot_dead1.png" delay="1" />
	</animation>
</root>

Posted 5 months ago #

riq
Key Master

I love the graphics.

Have you tried the cocos2d animation format ? https://github.com/cocos2d/cocos2d-iphone/blob/develop/Resources/animations/animations.plist
It was added a few months ago. But I would happily improve it with your suggestions.

What is fps in your format ?

Posted 5 months ago #
ravenousgames
Member

@riq: Awesome! I should take a look since mine basically does the same thing. I have a couple extra features in there namely for setting blend modes on key frames if need be and the ability to call functions in code. FPS is used to figure out the delay time since my delays are based on frames and not time (artist's request).

Posted 5 months ago #
riq
Key Master

@ravenousgames:
Yes, please, let me know if you need any addition to the format and I will happily add it.
BTW, are you using an animation editor ?

Posted 5 months ago #
ravenousgames
Member

@riq: I was provided frames from an artist and I build the XML files by hand from the frames he provided me. I was hoping to get some time to build an animation editor tool down the road. We aren't using this class to it's full capabilities but I also support offsets for each frame, spritesheets or individual images, as well as blending mode (mainly additive blending for glows). The biggest thing we support is the individual frame timings.

I'm not sure how you can implement that into CCAnimation since it seems to support only one delay time for all frames?

Posted 5 months ago #
GoldenJoe
Member

Huh. That seems pretty handy. Is there any documentation out there for the cocos2D animation plist files? A list of keys would be good...I'd like to know if it's possible to set a specific amount of time for each frame in the animation. Also, how could I combine these with TexturePacker when it's already generating spritesheets and plists?

Posted 5 months ago #
ravenousgames
Member

@GoldenJoe: I don't think you can set the individual frame times with Cocos2D. That's why I wrote the animation class. I will be sharing it after we launch the game. It uses spritesheets from TexturePacker or Zwoptex. :)

Posted 5 months ago #
TacoGraveyard
Member

@riq I have a very similar animation format. My format has a few additional params (like restore and repeat), but my helper class is building up CCAnimate instances rather than CCAnimation instances. The biggest improvement to the animation system would be variable timing for individual frames. I hacked something together for my current project, but it is not very cocos2d-like as it was one of the first things I built (before I was used to cocos2d).

Posted 5 months ago #
riq
Key Master

@ravenousgames, @TacoGraveyard:
Sure, I can add "time-per-frame" in the animation. Any other feature that you would like to have ?

Posted 5 months ago #
ravenousgames
Member

@riq: Being able to set blending modes for individual frames would be a big help. Supporting offsets from the original position would be good too.

Posted 5 months ago #
riq
Key Master

@ravenousgames: Yes, I could add blending mode. What do you mean by "offsets" ? Could you give me an example ?

Posted 5 months ago #
ravenousgames
Member

@riq: Well what I currently do is create a CCNode for the Animation. As each frame comes up, I create a CCSprite and set it's properties (blending mode, anchor point and position) as well as the next frame time. This allows me to have a frame size that is to say 96x96 for all frames but I can have 1 frame that is 128x96. Now I can "offset" it by however many pixels I want to get it aligned. Maybe it needs to be shifted 10 pixels left or right to line up. Does that make sense? :)

Posted 5 months ago #
riq
Key Master

@ravenousgames: Yes, it makes sense.

Posted 5 months ago #
Codemattic
Moderator

Looks great. Cant wait. But, um, lightsabers? Have a backup plan if you are forced (HA!) to change that.

Posted 5 months ago #
riq
Key Master

@ravenousgames:
I couldn't work on the new format yet, but after thinking of it for a while I think that blending mode should be a property of "spriteFrame" and not "Animation".
What do you think about it ?

ps: I've been playing League of Eveil 1 with iCade and it is great!!! Congratulations!

Posted 5 months ago #
ravenousgames
Member

@riq: Yeah I think you are right there. In my XML file I was specifying an attribute for blending on a frame specifically. Would be great to see that support native to Cocos2D!

PS. Glad you are liking the iCade support on the original :)

Posted 5 months ago #

riq
Key Master

Hey,

So, I am about to implement this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>animations</key>
	<dict>
		<key>dance_1</key>
		<dict>
			<key>loop</key>
			<bool>YES</bool>
			<key>restoreOriginalFrame</key>
			<bool>NO</key>
			<key>frames</key>
			<array>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_01.png</string>
					<key>delay</key>
					<real>0.1</real>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_02.png</string>
					<key>delay</key>
					<real>0.1</real>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
			</array>
		</dict>
	</dict>
	<key>metadata</key>
	<dict>
		<key>format</key>
		<integer>2</integer>
	</dict>
</dict>
</plist>

What do you think about it ?

Posted 4 months ago #

ravenousgames
Member

@riq:

That looks great. Here is a single animation from one of our files. I like that you've included offset which we left out in a refactor of the animation stuff we were doing.

One thing I might suggest allowing either the delay to specified in milliseconds like you have, or to specify the number of frames. We've found some of animations that were a little slow could be speed up easily by tweaking the FPS number which just calculated all that duration stuff for us. Plus artists like to provide animations in frame duration instead of millisecond timing like we programmers are used to.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Properties</key>
	<dict>
		<key>Spritesheet</key>
		<string>assets/art/enemy/gorilla/gorilla.plist</string>
	</dict>
	<key>Animations</key>
	<array>
		<dict>
			<key>Properties</key>
			<dict>
				<key>FPS</key>
				<integer>20</integer>
				<key>Animation</key>
				<string>gorilla_idle</string>
			</dict>
			<key>Frames</key>
			<array>
				<dict>
					<key>FrameName</key>
					<string>gorilla_idle1.png</string>
					<key>Duration</key>
					<integer>1</integer>
				</dict>
				<dict>
					<key>FrameName</key>
					<string>gorilla_idle2.png</string>
					<key>Duration</key>
					<integer>1</integer>
				</dict>
				<dict>
					<key>FrameName</key>
					<string>gorilla_idle3.png</string>
					<key>Duration</key>
					<integer>1</integer>
				</dict>
			</array>
		</dict>
	</array>
</dict>
</plist>

Posted 4 months ago #

riq
Key Master
Hey, I have some questions regarding the FPS. How does it work ?
```
// What does it mean ?
Properties.FPS =20;
```
Does it mean that the whole animation will stop after displaying 20 frames ? Or it means that it should go at a speed of display 20 frames per second ?
```
<key>Duration</key>
	<integer>1</integer>
```
What does it mean ? that it should use "2 units" of FPS ?
Posted 3 months ago #
ravenousgames
Member

So yeah, would would use FPS to determine how long a "frame" was. Since we are running this animation at 20FPS, and there are only 3 frames in it, each would be displayed for 0.05 seconds right? Unless of course it was of 2 or 3 "frame duration", etc. Doesn't seem like much until you wanna speed up a 12 or 16 frame animations. Tweaking one value that uses "frame duration" instead of a bunch of millisecond timings is a lot easier. Of course, supporting both would be great using different key names.

Posted 3 months ago #
riq
Key Master

So, if I understood correctly, in your example:

- Unit of speed = 20 FPS = 1/20 secs = 0.05
- Each frame will last: unit of speed * 0.05.
- You have 3 frames. And each frame has a duration of 1, so it the whole animation will last: 3 * 0.05 = 0.15

Is that correct ?
I like it.

Posted 3 months ago #
ravenousgames
Member

Exactly. Works really well because like I said, now you can tweak the FPS for the animation and the whole thing can get adjusted. Battle tested and proven in LOE2! :)

Posted 3 months ago #
Duckwit
Member

I love the graphics, and being a mega fan of League of Evil (and I, having been so inspired, am myself developing a platform based game) I can't wait to get my hands on this one!
Are you using your own Tile format? (Or did you in LoE1?)
Could you give us an estimate of a release date?

This looks awesome :D

Posted 3 months ago #
ravenousgames
Member

@Duckwit: Thanks! We didn't design our own tile format, using TMX files. We are shooting to release in the middle of February!

Posted 3 months ago #
Duckwit
Member

@ravenousgames I literally can't wait! Are you planning any beta testing? :DD *wink wink* This series is my role model for perfection.

Posted 3 months ago #
ravenousgames
Member

@Duckwit: Already in beta test :D

Posted 3 months ago #

riq
Key Master

ok. animation format v2:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>animations</key>
	<dict>
		<key>dance_1</key>
		<dict>
			<key>delay per unit</key>
			<real>0.2</real>
			<key>restore original frame</key>
			<true/>
			<key>frames</key>
			<array>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_01.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_02.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_03.png</string>
					<key>delay units</key>
					<real>0.5</real>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_04.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_05.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_06.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_07.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_08.png</string>
					<key>delay units</key>
					<integer>2</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_09.png</string>
					<key>delay units</key>
					<real>0.5</real>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_10.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_11.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_12.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_13.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
				<dict>
					<key>spriteframe</key>
					<string>grossini_dance_14.png</string>
					<key>delay units</key>
					<integer>1</integer>
					<key>offset</key>
					<string>{10,10}</string>
				</dict>
			</array>
		</dict>
	</dict>
	<key>properties</key>
	<dict>
		<key>spritesheets</key>
		<array>
			<string>animations/grossini.plist</string>
			<string>animations/grossini_blue.plist</string>
			<string>animations/grossini_family.plist</string>
		</array>
		<key>format</key>
		<integer>2</integer>
	</dict>
</dict>
</plist>

gles20 branch has a working version. It is still has some bugs. I will fix them tomorrow.
https://github.com/cocos2d/cocos2d-iphone/commit/908fb72701b7034b1ef26dbe356b994a74d5096c

UPDATE: updated format

Posted 3 months ago #

riq
Key Master

Updated format.

This is how it works:

For artists, who like to use "units of delay" instead of seconds:

// Pseudo code (look for the .plist format in previous post)
animation.delayPerUnit =   1/20.0f;    // 20 FPS (in seconds)
animation.frame[0].delayUnits = 1;
animation.frame[1].delayUnits = 2;
animation.frame[2].delayUnits = 1;

For developers, who like to use seconds instead of "units":

// Pseudo code (look for the .plist format in previous post)
animation.delayPerUnit =   1;    // <-- Set it to 1 second
animation.frame[0].delayUnits = 0.05f;    // set the delay in seconds
animation.frame[1].delayUnits = 0.10f
animation.frame[2].delayUnits = 0.05f;

As you can see, this format, without any modification could be used both for artists and developers.

[GAME] League of Evil 2

Reply »