Super Cute Alien - A cute platformer, inspired on BattleBlock Theater, Super Meat Boy and others!



  • __________________ CHECK OUT THE REVEAL TRAILER!____________________

    click to see video

    Original post below:


    So, I've been working in the dark on this project for quite a while now. It basically started off as a 'gift' but we saw potential and we just continued worked on it. This is the first time the project gets out to the public, yay.

    Of course uses HaxeFlixel and some cool techniques related with OpenFL as well. I wanted to do a dev log for quite some time, and this new forums and this new section under HaxeFlixel sounds like the perfect place for it!

    First, some screens of the game. The style and most of the art is based on the Kenney sprites:

    http://puu.sh/oObBK/3f3f047aeb.jpg

    http://puu.sh/oObMY/c473d8683e.png

    http://puu.sh/oObY4/d6ecfe7468.png

    http://puu.sh/oOc48/769747428e.png

    Here's a couple of features that uses:

    • Puzzles that needs critical thinkin' or just ability
    • Night/Day cycle (with different npcs)
    • Shaders! I did a bloom based one, coupled with a radial, and one to tweak colors on the fly (for a more saturated days and blue-ish nights/rainy days)
    • Uses tons of tricks and features from HaxeFlixel core and the addons.
    • A great workflow, thanks to Tiled and some minor code to reload assets/maps on the fly.
    • An inspirational/emotional/funny story, some sort of love letters to players, from game devs. What the character experiences is related with what devs all around experiences, and embraces this idea of how players needs games and games... players...
    • Rideable NPCs and lots of funny guns.
    • Lots of fourth walls broken! And here's an example:

    http://puu.sh/oOdg3/415f862b42.jpg

    Certainly, there's much more that will probably undisclosed later on, but as for now, I'm gonna keep writting here about the polish stage, and what changes the game will undergo 'til gets finally done. Always, from a design, tech standpoint :)

    Hope you enjoy the ride, and if there's some questions, I'll be happy to reply!



  • Haha, I like that it get's the user's username. I didn't know that was possible in HF/OpenFL. Good luck on the project though!

    i dunno check out my tumblr if you want (nsfw tho so watch yourself)
    http://carpetwurm.tumblr.com/
    (not nsfw version)
    https://carpetwurmlite.tumblr.com/

    0


  • Yup! Didn't know either, actually, there's lots of things you can do on OpenFL.
    It's a simple trick, with lots of impact. When the game directly adresses the player, by his name, there's a moment where the person goes 'wtf, how, what why' that I just love! Can't be done on all games though :( but I'm happy that I had the chance to make it here!



  • Nice graphics, but ground pattern is annoying IMHO :-)



  • I love the night-time effect!



  • Hey thanks! Yes, the night can be pretty neat. Ghosts do appear at night and make things more interesting, as you can ride those :)

    Here's a pic of the progress for a level (night time, of course!)

    http://puu.sh/oUUR1/d982178363.jpg

    It's been an hectic week, besides polishing, been trying to fix a blood effect that worked super cool with flash, but can't work on cpp due it needs the tresshold effect (is a thing for drawing meta balls) This is how it would work on flash:

    alt text

    But this is how I did it now, for windows:

    alt text

    I realize it might be too violent, but is intended.

    Lastly, been improving a bit the wildlife (added minor AI) and the torch for the caves:

    alt text

    Also, been improving like hell the rideable spider. Wonder what that is? A pic here:

    I'm gonna keep polishing and show more stuff later on. Too many little changes to do :(



  • Looks like it is coming along nicely, I really like how you got the blood to come out.



  • Thanks mate, been improving the blood gradually, thanks to feedback!

    Here's a gif of the updated blood ;)

    alt text

    HD version: https://gfycat.com/BlaringTornHoki

    More updated stuff soon!



  • Thanks to @Gama11 and @starry-abyss the HTML5 is now working!

    http://puu.sh/p0rlC/0cb6a3ddbc.png

    The performance is great :blue_heart: , although tons of effects are disabled. But is okay, since is for web, would be some sort of fancy preview of the full version.

    Also been creating a neat boss battle, that would add some interesting gameplay, since it breaks tiles and the player would need to avoid the gaps :)

    Here's a gif of it:

    alt text

    HD version here: https://gfycat.com/ConfusedDependentIslandcanary

    More news soon!



  • Nothing much, polishing here and there, here's how the PAUSE section is looking:

    alt text

    But there's another cool thing that I did, which is some sort of online news feed. Basically it fetchs the content from a file of my desire. Pretty cool, since it will allow us to inject live content, to let players know about upcoming stuff.

    Here's how it looks:

    alt text

    Code is suuuuper simple, if anyone is interested... just whistle.

    More news later!



  • I'm pretty interested by the code :p
    Do you have something like a repo?



  • Hey, sorry, not public repo, I wasn't planning to make it open source, plus the source is a bit messy (performs super well, but messy indeed), not an example or learning material at all :P

    Anyhow, here's the code for anyone interested on reading things from da webs:

            public static var newsFeed:String;
    
    	static public function getNews():Void
    	{
    		trace( "Utils.getNews" );
    		var _Loader:URLLoader = new URLLoader( );
    		_Loader.addEventListener( Event.COMPLETE, _onLoaded);
    		_Loader.load(new URLRequest("https://dl.dropboxusercontent.com/u/10323577/sca_news.txt"));
    	}
    
    	static private function _onLoaded(e:Event):Void
    	{
    		newsFeed = Std.string(e.target.data);
    		trace( newsFeed );
    	}
    

    Then, you can use it in your FlxText, by simply doing superMessage.text = newsFeed;

    As far as teh game goes, been crippling a few bugs here and there, nothing super important, but nothing to show at the moment.

    I will, probably, give away 5 free versions of the game here, to get some sort of feedback. I will do this later, but if anyone is interested, just whistle!

    EDIT: oh, remember to call getNews(), but wait a few seconds before using the newsFeed string (might take a few seconds to get the response back from da internets), otherwise you'd get a null string.



  • Well, after what I would consider, the worst flu I experienced in my life, we are back to bussiness :)

    Been polishing more things here and there, we added bosses intros :dark_sunglasses:

    alt text

    Is a bit inspired on the ones from Nuclear Throne

    Used the waifu2x image upscaler to increase the resolution of the original boss sprite, and it did wonders! If you haven't heard of it, take a look!

    Also, happy to announce that the final level is completed:

    alt text

    A video about the polished guns is coming soon!



  • Well, as it seems this topic gaining some traction, I guess it wouldn't hurt to give away some tips on the HTML5 version that we are creating. Hey, is a forum for HaxeFlixel users, after all!

    First of all, while some maps did run actually fine, others did not, because optimization was missing. A quick compile from the normal version (the one that had all effects) to HTML5, produced 14 unplayable maps. Yay.

    Now after lots of optimizations, 19 maps, from 20 works! 60/60 fps, with occasional tiny and acceptable drops on heavy moments. For those that wonder, the map that I still can't get to work is the one that needs the Tester thingy to draw lines between objects. Those lines are way too expensive, and the optimizations I made aren't enough.

    alt text

    Here's the tips I found successful while optimizing the HTML5 version:

    • HTML5 really really hates things such as alpha, rotations, scaling and coloring. If you are using some of them, and you are suffering from performance issues, consider using less and less of these. Do not understimate this tip!
      There was a map that had 40 fps max. For the love of me, couldn't figure out what was causing that. Ended up being the colored sprites that I had. The solution was simple: use already colored buttons.

    • Use loadRotatedGraphic() whenever possible. I had particles and lots of effects that basically crippled the performance. Reducing the amount of these and by using baked rotations, made these effects possible.

    • Mind your assets. By default, you might ending up just loading all the assets in your folders (<assets path="assets" />). That's is a no no, mainly because everything will be loaded. Not only because this will increase loading times, because increases memory usage as well.
      Consider excluding things that you don't need and reduce the quality and size of your assets whenever you can. In my case, I use exclude and I changed the paths on game.XML to use different sound folders (with lower quality) for the HTML5 version, while preserving high quality sounds for the Windows version. Here's a good article on how to handle this matter.

    • Not everything must be done 60 times per second! Is often a handy way to throw things that needs to always run, in your update()function. It could be a if(alive) check, or perhaps, an isOnScreen() check, it doesn't matter. The question is, do you really need to? If the answer is no, then what it comes handy, first and foremost, are FlxTimers. How so? You can create a (what I call) heart beat function, that you run aprox, once per second. In there you can check if your player is dead, or change the properties of all the members in a group, or you could update the text in your UI... anything really.
      A case study: I've got lasers in my game. Those needed to always call makeGraphic() and check for overlaps with elements in screen, such as props. I changed the frequency of those instructions, by removing them from update() and placing them on a function that was called 10 times per second or so. The performance gain was inmediate with any side-effects.

    alt text

    • super.update(elapsed) can be a life saver. The new option of update lets you specifically, change the update speed. I found it extremly useful, as I had some NPCs that had some heavy code. Reducing the update rate of these resulted in a performance gain I didn't thought it could be possible. And was by simply doing super.update(elapsed/2). I combined it with a distance check, so the objects that were far from my main character, were updated less. This saved CPU cycles and the performance increased.

    • Be memory friendly. Use destroy() for things that you won't ever ever need. In my case, I had permanent bodies. In some maps, the body count was way too high. You surely can use exists = false, but if you have no plans to reuse them, use destroy() This will free some memory, and that is always good :)

    • Use recycle() - revive() and try to create everything you are going to need, at the start of your state. Creating new objects at runtime is not always a good idea. You could recycle bullets, instead of creating new ones. You could revive NPCs you previously killed, instead of creating a new one.

    • Common sense is your friend. Why to do a complex collision or overlap check, when you just can simple check the.yof two objects? In my case, on the latest picture, I had some acid that did rise. Touching it of course, would kill the player. While overlap/collide was acceptable, I found out that just checking the Y position of the character and the Y of the acid, was 10x times better! This of course can't be applied on all your games, but if you are suferring from performance issues, you might find some answers by thinking outside the box!

    • You are human, you will miss out things, this is why you need profilers. Chrome bundles up a great profiler you can quickly use, by opening the console (F12) and going to the Profiles tab:

    alt text

    You can use the Take Heap Snapshot option. This will show memory distribution in your game. You can sort the values, to see which functions are the most memory consuming ones. In my case, I've got 311 particle objects that I'm not even using. I will need to decrease a bit the maxSize of my FlxEmitters :stuck_out_tongue_closed_eyes: - Also, I've memory allocated for things that I didn't add, but were created anyways (such as the character's cape).

    Well, that's it for now. I hope someone else will find this tips useful! If something else pops up in my mind, I will be sure to edit this post. Laters! :heart_decoration:

    EDIT: added the profiler tip.



  • Very interesting Dev Log! The game looks interesting.

    Is there a chance to test a Demo?



  • @Agustín-Pérez-Fernández hey, thanks mate! The HTML5 will be free, so, yes, I will sign you up for the next batch, latest version, as soon as it is done :)

    And, speaking of which, been polishing the UI. Idea is to have a quite clean interface, with the less amount of objects as possible. Most of the UI elements come and go exactly when you need them. Is a much more time consuming process, but more inmersive.

    Here's how it looks so far, also here's the logo, which is WIP, of course:

    alt text

    Sadly, most of this UI won't be available for the Windows version. This is like... a simple UI, mobile/web oriented, with gigantic, and readable content (ugh! :sick:). The Windows version will have a different menu, with different options, and considerably smaller UI. For PC people, ya know :upside_down:



  • Wonder what this might be...

    day

    night



  • Development of SCA resumed and soon releasing on Steam Early Access! Here's some mayor points:

    • Added Spine skeletal animation for masks support, and well, incredible character customization and movement. Also created some cool clases to easily customize colors and attachments. This is something probably I will write in more detail later, since, well, this is a HaxeFlixel forum!
    • Added local multiplayer, plus a few coop and versus maps.
    • Added joystick support. Works beautifully.
    • Support for HTML5 and Flash dropped, we will only target Windows for now.

    alt text

    alt text (lol)

    Last stop is the dynamic lighting and guess we are good to go. More media super soon!





  • Well, I guess since we about to reach 5000 views (!!)... I sense there might be a person or two that is still tracking this dev log! So, quick update!

    SINGLE PLAYER MODE:

    • Added GOOD/EVIL system. Basically, good actions give you rewards, and being a bad boy makes you evil. Being good or bad unlocks different content.
    • Added antenna that controls enemies for advanced gameplay. You can break the antenna, fight its drones and pick loot or save the controlled enemies individually and get coins or walk past by and ignore everything or kill everything in sight!
    • New enemies!
      alt text
    • Added shader based meta balls ( this is to spawn realistic blood, like a liquid!)
      alt text

    VERSUS MODE:

    • Added player selection
      alt text
    • Added zoom in, zoom out
    • Tons of cool weapons (with lasers, silencers and cool stuff)
    • Vendetta mode (challenge and punish other players)
    • Aaaaaaaaaaaaand added ragdolls! CHECK IT OUT (heads are placeholders!) -> https://my.mixtape.moe/jlbanz.webm

    Here's how it looks so far (there's someone cloacked there!):
    alt text

    And all of this stuff supports joystick. And 4 players. In coop as well.

    There's more stuff, but I can't remember everything. So, here's the changelog from repo.

    alt text

    That's it for now! Thanks, bye



  • Survival mode in coop :)

    alt text

    I also found the way to, finally, replace custom FlxSpine sprites, programatically. This would be incredible useful to support things like.. custom user heads!

    alt text

    They, of course, support ragdoll. The implementation reads directly from the FlxSpine body parts and creates bodies and sprites accordingly. Also, I extended the system to support a few unnecessary things (but cool) such as dismemberment, freezing of bodies (for the ice gun) and a burning mode, which uses a procedural 'running on fire' animation driven by physics. It really looks organic and brutal, which was the intention :)

    alt text

    This involves hacking FlxSpine::GetSprite function:

    if (regionAttachment.name.indexOf("alien/masks/custom") >=0)
    		{
    			trace("mask detected, replacing");
    			var wrapper2:FlxSprite = new FlxSprite("assets/custom heads/custom1.png");
    			
    			if (regionAttachment.name.indexOf("alien/masks/custom1") >=0)
    			wrapper2.loadGraphic("assets/custom heads/custom1.png");
    			
    			if (regionAttachment.name.indexOf("alien/masks/custom2") >=0)
    			wrapper2.loadGraphic("assets/custom heads/custom2.png");	
    			
    			if (regionAttachment.name.indexOf("alien/masks/custom3") >=0)
    			wrapper2.loadGraphic("assets/custom heads/custom3.png");
    		
    			if (regionAttachment.name.indexOf("alien/masks/custom4") >=0)
    			wrapper2.loadGraphic("assets/custom heads/custom4.png");
    					
    			imageFrame = FlxImageFrame.fromGraphic(wrapper2.graphic);
    		}
    

    Luckily I found out the way to do, 100%, everything I wished for the Spine implementation. If anybody has a question about it, I will super happy to help!

    Here's the inventory that won't make the cut for the upcoming public version, but will be finished at some point:

    alt text

    alt text

    In the last couple of months an insane amount of changes were done. Most of them, probably, boring, so a video is coming up soon!

    EDIT: added speech bubbles!

    alt text

    alt text

    Did a fancy, super easy class to manage a simple speech bubble. You feed a large string containing '\n" for line breaks, then displays each line in sequence (which you can speed up and skip). Anyone interested, just whistle!


Log in to reply