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



  • Aaaaaaaand finished some sort of demo. Anyone interested, just whistle and I'll be sending a copy!

    alt text

    EDIT:

    I've been asked on now to make these fancy buttons. Most of it comes from the great 9 slice tutorial from here: http://coinflipstudios.com/devblog/?p=243 But I extended it a bit to support fancy labels. And that's the trick. Here's the steps I took.

    Somewhere in your class:
    var btn_versus:FlxUITypedButton<FlxSprite>;

    In your create();

    var _slice:Array<Int> = [10, 10, 40, 40];
    		var _sliceArray:Array<Array<Int>> = [_slice, _slice, _slice]; // all 3 buttons have same slicing
    		var _graphic_sheet:String = "assets/img/ui/9slice/sheet_button.png";
    		
    		buttonsWidth = 170;
    		var buttonsHeight:Int = 50;
    		var labelHeight:Int = 35;
    
    btn_versus = new FlxUITypedButton(0, 0,YOUR_FANCY_FUNCTION_HERE);
    		
    		btn_versus.loadGraphicSlice9([_graphic_sheet], buttonsWidth, buttonsHeight, _sliceArray, FlxUI9SliceSprite.TILE_NONE, -1, false, 49, 49);	
    		btn_versus.label = createLabel();
    		cast(btn_versus.label,FlxBitmapText).text = "Versus";
    

    Here's the sprite I created:
    alt text

    Now, on the label. I used a custom bitmap font, with effects already on the letters. You need this kick ass site to generate your font: http://kvazars.com/littera/ -- nothing complicated, just pick Preset: Basic and export as it comes by default (XML .fnt)

    Grab the exported files and put them in your assets folder.

    If you noticed, I used createLabel(), here's the function (feel free to tweak it as you wish ie scale):

    private function createLabel():FlxBitmapText
    {
    	var textBytes = Assets.getText("assets/font/font.fnt");
    	var XMLData = Xml.parse(textBytes);
    	var fontAngelCode:FlxBitmapFont = FlxBitmapFont.fromAngelCode("assets/font/font.png", XMLData);
    	
    	var fancy_text:FlxBitmapText = new FlxBitmapText(fontAngelCode);
    	fancy_text.text = "change_me";
    	fancy_text.blend = BlendMode.MULTIPLY;
    	fancy_text.alignment = FlxTextAlign.CENTER;
    	fancy_text.multiLine = true;
    	fancy_text.wordWrap = false;
    	fancy_text.scale.set(0.5, 0.5);
    	fancy_text.antialiasing = true;
    	fancy_text.autoSize = true;
    
    	return fancy_text;
    }
    

    Now, the labels won't be centered. That's a bit tricky since is now a label of a button, and the latest will control its position. We need to offset it automagically, like this:

    btn_versus.label.offset.x -= (buttonsWidth - cast(btn_versus.label, FlxBitmapText).width) / 2;
    btn_versus.label.offset.y -= (buttonsHeight - cast(btn_versus.label, FlxBitmapText).height ) / 2;
    

    Well, off I go. Hope that comes useful for someone else!



  • This post is deleted!


  • @Claudio-Ficara hello I've been following your development of this game for months I've learned so many great tricks and tips from optimization to the cool Dropbox text loader to now really nice flx Bitmap text. I'd love a copy of the game if that's still available. Also the Continued updates of this dev log is really helpful to so many devs as well as myself and I really appreciate it.



  • @PXshadow Hey mate, thanks for following the project and I'm super glad I helped someone with these tips and such.
    I do recognize that I should be writting more about some concepts, ideas and implementations, specially because the HaxeFlixel/OpenFL/Spine/Tiled combo is quite powerful, and there are some libraries, (ie Spine) that could use some explaining.

    As a related Dropbox text loader / copy of the game, I implemented this other thing yesterday, looks like this:

    alt text

    Basically, is a very simple activator online, that will fetch from a server what copy should and shouldn't be playable. Also, there are two methods of activating it, as a developer or beta tester.

    I do understand that is not a perfect solution and could be easily cracked, but it would stop most of the people without that knowledge.

    While the final version of the game won't have DRM (perhaps a default common one handled by the distribution platform) this whole thing is important for a few reasons: 1- Kill switch for versions that got leaked. 2- Kill switch for versions that are waaay too old. 3- Developer mode can be easily set for any person I wish.

    But in short: yeah, I'm gonna wrap this up and prepare a copy!



  • This post is deleted!


  • Moar GFX progress!

    alt text

    PS: Preparing a playable copy soon. Is just that this thing took priority.



  • Aaaaaaaaand currently improving things here and there. Here's some tests for the night glows. Not sure if looks exactly accurate...

    Night glows test



  • Well, here's to celebrate 7000 views!

    Been working on this non-stop to polish it the best I can. Here's some images of the upcoming changes! The rest of the changes are boring:

    alt text

    alt text

    Also, been tweaking the gore aspects a lot. Ragdoll is now supported for single player and there's decal support :)

    alt text

    More soon, of course. Ktnxbai!



  • I'm starting to collect emails to send a preview copy. It only contains 2 game modes, so far, but once things get in better shape, beta testers will be able to access to the full content.

    Anywho, here's the GOOGLE FORM TO ACCESS BETA

    Link to download will be sent once a bunch of emails are collected. Thanks for participating and enjoy!



  • EDIT: Yay, flamethrower!

    alt text

    oshi- Windows 10 users are currently experiencing crashes. This is now fixed. Expect a patch soon arriving in your emails.

    Now, as far as dev goes, we are between tweaking GFX and improving gameplay. Here's a couple of things:

    alt text

    One is the antenna that controlls enemies, the other is the weapon vendor, weapon kiosk, where you can access lots of fancy weapons and items.

    Here's a gif that show cases new monster abilities and more interesting player damage: https://my.mixtape.moe/hedaif.webm

    That monster is going to be replaced by dis:

    alt text

    And well, it will come with a couple of variations, such as fire, ice, and etc.

    While people is having fun with survival and versus, the single player is going to be tweaked a lot.

    We are moving towards of what I would call a closed open world style. Open in a sense of bigger maps, in dimensions, with more optional content you can do... or skip. Closed in a sense that levels would pretty much start and end in the same way. How you do so would be up to the player. This would be a bit like Braid. A bit. You go right and finish one level after the other. Or you go and complete all the puzzles and challenges.

    Oh, and flashlight for da night:

    alt text
    More stuff soon.



  • Shout-out to the guys from Arcade Crowd for doing a hilarious video!

    click to see video

    Remember that anyone can fill up this form (just an email) to participate in the closed beta!



  • I'm the worst dev logger (?) ever, I should be posting here more... but hey! I implemented FXAA!

    First of all, right click -> view image, so it opens in full.

    OFF:

    alt text

    ON (notice how the text looks a bit better around the edges):

    alt text

    Da code:

    FlxG.addPostProcess( new PostProcess("assets/shaders/fxaa.frag"));

    Put the following in a file namedfxaa.frag, inside "assets/shaders"

    #ifdef GL_ES
        precision mediump float;
    #endif
     
    varying vec2 vUv;
    varying vec2 vTexCoord;
    
    
    uniform vec2 uResolution;
    uniform sampler2D uImage0;
    
    
    /* Basic FXAA implementation based on the code on geeks3d.com with the
       modification that the texture2DLod stuff was removed since it's
       unsupported by WebGL. Made HaxeFlixel ready by Claudio 'SysOp' Ficara*/
    
    #define FXAA_REDUCE_MIN   (1.0/ 128.0)
    #define FXAA_REDUCE_MUL   (1.0 / 8.0)
    #define FXAA_SPAN_MAX     8.0
    
    
    void main () {
        vec2 delta = 1.0 / uResolution;
    
        vec3 rgbNW = texture2D(uImage0, vTexCoord + vec2(-1.0, -1.0) * delta).rgb;
        vec3 rgbNE = texture2D(uImage0, vTexCoord + vec2(1.0, -1.0) * delta).rgb;
        vec3 rgbSW = texture2D(uImage0, vTexCoord + vec2(-1.0, 1.0) * delta).rgb;
        vec3 rgbSE = texture2D(uImage0, vTexCoord + vec2(1.0, 1.0) * delta).rgb;
        vec3 rgbM = texture2D(uImage0, vTexCoord).rgb;
    
        vec3 luma = vec3(0.299, 0.587, 0.114);
        float lumaNW = dot(rgbNW, luma);
        float lumaNE = dot(rgbNE, luma);
        float lumaSW = dot(rgbSW, luma);
        float lumaSE = dot(rgbSE, luma);
        float lumaM  = dot(rgbM,  luma);
    
        float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
        float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
    
        vec2 dir = vec2(
            -((lumaNW + lumaNE) - (lumaSW + lumaSE)),
            ((lumaNW + lumaSW) - (lumaNE + lumaSE)));
    
        float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
        float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
        dir = min(vec2(FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX), dir * rcpDirMin)) * delta.xy;
    
        vec3 rgbA = 0.5 * (texture2D(uImage0, vTexCoord.xy + dir * (1.0 / 3.0 - 0.5)).xyz + texture2D(uImage0, vTexCoord.xy + dir * (2.0 / 3.0 - 0.5)).xyz);
        vec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(uImage0, vTexCoord.xy + dir * -0.5).xyz + texture2D(uImage0, vTexCoord.xy + dir * 0.5).xyz);
        float lumaB = dot(rgbB, luma);
        if (lumaB < lumaMin || lumaB > lumaMax) {
            gl_FragColor = vec4(rgbA, 1.0);
        } else {
            gl_FragColor = vec4(rgbB, 1.0);
        }
    }
    

    Have fun with your less sharp edges!



  • @claudio-ficara said in Super Cute Alien - A cute platformer, inspired on BattleBlock Theater, Super Meat Boy and others!:

    We are moving towards of what I would call a closed open world style. Open in a sense of bigger maps, in dimensions, with more optional content you can do... or skip. Closed in a sense that levels would pretty much start and end in the same way. How you do so would be up to the player. This would be a bit like Braid. A bit. You go right and finish one level after the other. Or you go and complete all the puzzles and challenges.

    What is the difference between Flixel antialiasing and your solution?

    The game is looking great!

    I think you are from argentina. We should get together sometime as we are both using HF.



  • Silly me, I guess I should have explained it better. Basically FXAA is a fast antialiasing solution. Here's an article explaining it better than myself.

    Anyhow, the implementation at hand makes a subtle difference, but is there:

    alt text

    To reply your question:

    Flixel antialiasing sometimes causes artifacts, such as pixel bleeding, this is when pixels go outside its boundaries, or simply sometimes transparency is handled poorly and black pixels might appear.

    Here's the reference image. no antialiasing at all:

    alt text

    Here's Flixel antialiasing ON, notice the right side of the cactuses, and the black border around the rock:

    alt text

    Here's the FXAA solution:

    alt text

    Now, we should have in mind that this is a scaled up, full screen version of the original resolution. A game that has a 1024x576 internal resolution, adapted (on my case) to 1920x1080.

    Also, Flixel antialiasing can work to an extent. I had sharp edges on my text even with antialiasing on, this is why I had to do this (among other things) Also FXAA, being shader based, works on the whole image, giving more cohesion.

    I'm not advocating to not use Flixel's antialiasing. Everything comes down to the type of game you doing and how nitpicking can you go about the final picture.

    I think you are from argentina. We should get together sometime as we are both using HF.

    Yes, I am! Hook me up on Facebook if you like. Or check my contact page for other options!

    PS: To everyone that signed up for the beta, I'll be sending a copy around this weekend!



  • @claudio-ficara said in Super Cute Alien - A cute platformer, inspired on BattleBlock Theater, Super Meat Boy and others!:

    FlxG.addPostProcess( new PostProcess("assets/shaders/fxaa.frag"));

    Thanks!

    I tried it on my game but it looks better with flixel antialias.

    Do you have any tutorial on how to create postprocess effects?



  • You can tweak the shader to adjust FXAA settings. I ended up getting ride of it, not because it looks bad, because I'm using another effect which also softens edges.

    Speaking of postprocessing, I just did a shockwave effect!

    alt text

    Now... how to make those? Basically, you've got to look for simple 2D post processing (no multipass or whatever )

    Here's two sites that are my first options while searching for cool effects:

    www.shadertoy.com
    www.geeks3d.com/shader-library/

    However, 99% of those won't work out of the box. You have to replace the coords, texture and such by the uniforms that HaxeFlixel specified, which are:

    varying vec2 vUv;
    varying vec2 vTexCoord;
    uniform vec2 uResolution;
    uniform sampler2D uImage0;
    

    Doesn't end up there tho. Shaders have differences in how they are supposed to read the mouse and to get time, for example, so you have to tweak that out. For mouse (or another position) you have to to translate the coords to screen coords. Ain't hard, just:

    shockwaveShader.setUniform("centerX",obj.getScreenPosition().x/FlxG.width );
    shockwaveShader.setUniform("centerY", 1-obj.getScreenPosition().y/FlxG.height  );
    

    we have to do /FlxG.width because, also, the coords from the shaders are different (0 being left, 0.5 being center... 1 being right)

    And I think it pretty much covers that up. However, this is not a way to explain how shaders are created (there are tutorials for that), just a way to make shaders compatible with HaxeFlixel so you can get new effects... right here, right now.



  • hey, i really like your devlog, its really useful and fun to read. Also, the game is looking great, the polish you did on the graphics really shows.



  • Thanks mate!

    And... as requested, added cover mechanics!

    gif here

    They are stupidly easy to use. Quickly added because they were a left over from this project .

    These are contextual, that means by simply going next to an object you can cover under, and pressing down, you enter in cover mode. That's it. Exit cover by walking off or looking the other way.

    Cover systems in 2D are a bit unexplored. The first one as I recall was Blackthorne, this was later picked up by Not a Hero. This is a bit based on Soldat 2D, except is easier to use. And looks like there's nothing else on the subject :(

    This will be the beginning of something new, fun times ahead as we go into unexplored territory! I've been lately playing Ghost Recon Wildlands and notice enemies indicator do blink when they are in cover so probably gonna be adding that on the next iteration.

    Any suggestions are welcome!

    That's it for now, more news later!



  • Just saw the trailer it looks really good! Would you mind answering a question of mine? I have some nice graphics that I have been ready to put in my own project. No matter what I do though its blurry and not as good as it should be.
    I use the loadGraphic method in FlxSprite. Is this the wrong way to do it?



  • @bronson-sedeno said in Super Cute Alien - A cute platformer, inspired on BattleBlock Theater, Super Meat Boy and others!:

    Just saw the trailer it looks really good! Would you mind answering a question of mine? I have some nice graphics that I have been ready to put in my own project. No matter what I do though its blurry and not as good as it should be.
    I use the loadGraphic method in FlxSprite. Is this the wrong way to do it?

    Hi Bronson, thanks for your words! Regarding your project, do you have a screenshot? What is the resolution of your game and what is the Flixel resolution, do you use? For example, in my game, my resolution is 16:9 friendly, 1024x576.

    From my experience, things get blurry when you use zoom, basically, something that is 20x20, with zoom = 2, might look like 40x40 in your screen, but it will get blurry. Do you use zoom?

    Now, regarding SCA, we have been doing fantastic progress in the GFX department, thanks to the very talented Owen Eaddy

    alt text

    alt text

    Also, extended the Dialog class I mentioned before, to have support for a more classic dialog box, multiple characters, and gibberish audio!

    alt text

    Since this Dialog class is very tiny and I'm quite proud of the results, I'm gonna be sharing it soon, so anyone else can add dialogs and or speech bubbles easily! Like this:

    dialog.start("char1Hi there! This is all a filler. See? You can fit a lot of words in this box. Pretty neat, huh?#Another line, same character#char2If you choose not to decide, you still made a choice.#Do you understand?#char1What are you saying?#char2player_name is watching us. KILL THEM ALL!");
    

    THAT'S IT FOR NOW!

    EDIT: New enemy! No ghosts (?) anymore. Somewhat concept-ish, but won't change much later:

    alt text



Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.