Category Archives: Cat Cafe

Cat Cafe Achievements

Finished the achievements for Cat Cafe!
As you can see, you get some in-game money for completing them. A lot of them also have multiple levels; basically several similar achievements grouped together into one.

medals

Yeah, serve those cats.

I also added in alternative animations for all of the cats, so now there’s 3 or 4 variations of each animation. You’ll see these in action fairly soon. Hopefully the game will be ready for beta testing in 3 days or so.

medals2

Punching Bags x3 is 125 cats!

Remaking Cat Cafe

Here’s a little blog about what I’ve learned while working on Cat Cafe. If you do a lot of game programming, then you’re probably familiar with a lot of this stuff. But if like me, you started off by making Flash animations, and are used to making games in the Flash Pro IDE, some of the following features may be new to you.

The advantages of hardware acceleration!

As most of you probably already now, Flash was designed for running small animations in web browsers. It’s traditionally never taken advantage of your GPU (graphic’s card), because you don’t really want to give random Flash apps that much power over your machine. Flash also likes to use vector art to save on filesize. As a result, Flash’s graphics performance is rather crap.

But new versions of Flash introduced the Stage3D API, which lets you take advantage of the GPU, hurray! Still, this feature has to be enabled on whatever website is showing the Flash content, so it won’t work everywhere. On mobile devices, you don’t generally use web apps, and instead you download them to your phone from trusted sources, and when you do that, you give them permission to do whatever they need to do. So getting permission to use the GPU isn’t an issue anymore.

So hardware acceleration means better performance, but you need more permissions, which web-apps don’t usually get.

What is Starling?

The Stage3D API is really hard to use. It’s really low level stuff. Starling is a framework that gives you a layer on top of Stage3D which is much easier to use, and works more like Flash’s normal sprites and display list.

The major difference between working with Starling and working in Flash Pro, is that you gotta do a lot more coding. You can’t just put a bunch of vector graphics down on the stage and then do some motion tweens on them. You have to save your graphics as bitmaps, and create and control them through code. This makes it a lot harder to put together a scene you’ve visualized, but it also gives you a lot more control over the objects in your game.

Advantages of scripted animation?

Well one huge advantage of scripting your tweens instead of doing them in Flash Pro means that they can be either frame-based or time-based. Frame-based tweens are synced with the framerate of your game, while time-based ones are synced to the actual time, meaning that they can have a variable amount of frames in them. This is pretty useful sometimes. In Cat Cafe, it means that the game doesn’t slow down if your phone can’t handle the full framerate of 60fps. It simply runs at the same speed, but at a lower framerate, and doesn’t play differently at all.

A lot of frequently used tweens like “bounce in” or “ease in and then out” can be created by setting one variable, which is a lot less work then setting easing over several keyframes in Flash Pro. You can even create your own preset tweens to reuse later! (I haven’t tried this, but it seems very useful. Would have been very useful in EBF, for death and heal animations, which always use the same color/alpha tweens.)

Another advantage is that it’s usually just plain easier to make changes. If you want to make an animation last longer, or you want to tween an extra property, or you want to run a function when the animation finishes, or whatever… you just have to add or change one variable. Meanwhile in Flash Pro, it can be quite frustrating trying to update many keyframes of animation if you want to change something.

One final advantage, which is quite handy, is that you can easily have tweens “blend” into each other. For example, if your character is doing an “attack” animation, and then he’s interrupted half way through and starts doing a “hurt” animation, the tweens will naturally  move into the new animation. If you animate in Flash Pro, you can’t do this, instead you get an instant animation jump, which sometimes looks quite ugly.

What is DragonBones?

DragonBones is an add-on for Flash Pro, which lets you export animations you make there into a format that is usable by Starling and maybe other frameworks too. Basically, it takes your animation, and converts all of the vector art into a bitmapped spritesheet, and converts your tweens into XML data, which can be parsed by whatever engine or framework that supports it. It actually works well, and supports frame labels and events, and everything that I needed for Cat Cafe. I haven’t tried anything very complicated yet though.

This is cool because it means you don’t have to do frame-by-frame spritesheet animation to take advantage of hardware acceleration! The performance is a bit worse due to the extra processing of the tweens and all that, but it saves memory, and it’s better than having to pre-render every frame of a long animation! Also, it lets you swap out textures/skins, which I do a lot in my games.

The main inconveniences are that I have to export the whole animation every time I want to make a minor change, and that parsing the XML data seems to take some time. But no big deal.

Dragon bones!

Dragon bones!

How has all of this effected Cat Cafe?

Well first off, it’s totally spaghettified my code. Cat Cafe was already more than half finished before I even considered using Starling or DragonBones, so I had to redo quite a large portion of the game. It would have helped to do a bit more research before jumping into a project I guess.

So I had to reprogram a lot of the game, and move a lot of code and assets to different places. The result is the messiest code that I’ve worked on since Bullet Heaven (when I was just learning AS3).

But apart from that, the performance is a lot better! Cat Cafe now easily runs at 60fps and 720p on my Galaxy Note 2. Previously it was only getting around 30fps. There’s also more animation going on now; previously the cats didn’t move once they popped up, but now they breathe and stuff. The game also runs perfectly on my dad’s HTC Sensation. I’ve also been testing it on my old HTC Desire, and it doesn’t run amazing, but it’s perfectly playable, at around 33fps.

The newer phones seem to have gained a larger performance boost from the changes. Maybe that’s because they have much better GPUs or something. Having multiple CPU cores doesn’t help much, because Flash never uses more than one (as far as I know).

I think the performance bottleneck is now at the logic, rather than the graphics rendering. For example, parsing and initializing the Dragon Bones skeletons seems to take significant processing. It’s not very noticeable on my Note 2 (takes maybe a second or less), but on my Desire, it takes around 3 seconds. Luckily, I only need to do that once when the game is loaded.

Anyway, the game runs a lot better now than I ever expected was possible with Flash, and I’m sure the performance could be even better if I was more familiar with Starling and Dragon Bones.

I should also mention that I was too lazy to remake the menus in Starling, so they’re still just normal Flash content. They don’t have much animation, and performance isn’t vital there, so I don’t really think they’re worth the effort of updating. But in future I’ll do things properly from the start and all the way through.

I need more phones!

I need more phones!

What’s next?

Well Cat Cafe is almost finished now. I just need add achievements, polish off a few things, maybe try to improve the performance a bit more, test on some more devices, and then publish it for beta testing.

I’ll release the phone version on the web for some testing and feedback first. This will literally be the phone version, but in your web browser. So it’s going to play a little strangely. I’ll mainly be looking to fix bugs and get suggestions with this release, and I’ll take it down after a few days.

After that I’ll release it on Android, and if things go smoothly, I’ll start looking at iOS shortly afterwards. Porting to iOS should be very easy, the only issue is that I’ll have to buy an iDevice or two, or try to find some people who have some.

And then once all of that is sorted, I’ll release the real web version to promote the mobile versions. Woop.

Cat Cafe Upgrades

Today I made the upgrade/shop menu for Cat Cafe, along with all the item icons and descriptions. I think the interface is actually starting to look quite nice. Perhaps I’d even say that it’s the best interface I’ve made so far. You can’t see it in the screenshots, but the menu transitions are pretty smooth too.

GUI1

There’s 26 items to buy in total.

Most of the items in the shop increase the amount of $$$ the cats give you, as well as changing their appearance. But there’s also some other perks, such as increasing the length of happy hour, or increasing the number of mistakes you can make. Nothing too interesting really, but they should add some replay value.

gui2

So wow. Amaze!

Next up, achievements!

Cat Cafe Spritesheet

I used Dragon Bones to convert my Cat Cafe animations into a PNG with XML data. Interesting…
Now I need to figure out how to use this in Starling. Hopefully it won’t be too complicated.

This stuff is kind of cool because I’m learning the “proper” way of making game assets. :P

spritesheet small

Starling Tests

When I was in London, a bunch of people recommended that I check out the Starling framework for making Flash games for mobile platforms. I was already slowly looking into it, but after hearing about the massive advantages and relative ease of implementation, I jumped right into it.

Basically, Starling let’s you use Flash’s Stage3D API and hardware acceleration without having to do any low-level programming.
With hardware acceleration, you get much better performance, which is very important for mobiles.

The limitation is that Flash’s traditional motion-tweened animations don’t really port well; it’s better to use sprite-sheet style animation.
That’s fine for Cat Cafe though, because the animations are very simple, and I can port the tweening required quite easily.

Anyway, here’s some of the tests I did:

icon1

Test 1: Stars

icon2

Test 2: Cats

icon3

Test 3: Tweens

 

 

 

 

 

The first test is just a bunch of glowy and transparent objects bouncing around, much like they would in Bullet Heaven.

The second test has a lot more particles and no transparency, which speeds things up a bit.

The final test is just to see what Starling’s built in tweening engine can do. It’s pretty easy to code objects flying around, stretching, rotating and fading. But it would be pretty hard to animate a character with multiple moving parts this way.

All of these tests should run at 60fps on a decent machine. They’re pretty extreme though, and no games that I have planned will need this many objects, not even a potential Bullet Heaven 2. For now I’m just going to use Starling to get Cat Cafe working at 60fps on crappy phones.

Cat Cafe Dress Up Mode

This is pretty much the same thing as that “Cat Maker” I posted earlier, but with a new interface. I’m a bit worried that the buttons might be a bit small on devices with small screens, so if that ends up being the case, I’ll have to rearrange things a bit.

dress up

He looks happy…

Anyway! The main thing to notice here is the “Screenshot” button! Click that and you’ll get a wee JPEG of your cat saved to your device! This is a feature that a lot of my previous games would have benefited from. Unfortunately, it’s a lot harder to implement if the game is running in a web browser. For security reasons, Flashplayer can’t create random files on your computer, without help from some external PHP code (or something like that). So this is a feature that the web version won’t have, but will be available on your mobile device instead.

Cat_Cafe_Screenshot

This image was made by the app.

Cate Cafe Main Menu

Been working on the main menu for Cat Cafe.
It’s nothing too fancy, but I think it looks quite good so far.

I’ve also been playing around with some more Android features.
Turns out that it’s pretty easy to use the “Menu”, “Back”, “Search”, and other buttons. They’re basically treated like keyboard keys.
I shouldn’t rely too much on them though, since different Android devices have different buttons, but it’s still handy to have them.