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



  • 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



  • Celebrating 10000 views with a gift for you all! Thanks for the support!

    A new day and a new feature that I've been wanting to do for a while.

    I did something awesome! Since I'm lazyI like to get results ASAP and I'm quite not planning to do a death animation for each one of the characters, I worked a bit on something I'm planning to share today, which is an automatic ragdoll generator

    alt text

    Basically, the way it works is really simple. Here are its features:

    • Grabs any spine skeleton and clones its parts. Physics bodies will have the image dimensions and the proper image itself.
    • Scaling of said skeleton is supported.
    • Position of the limbs will respect the original positions of each image (so it doesn't pop up).
    • Facing left|right is supported-ish.
    • Supports body parts replacements. So, if you want to use a damaged head, or a damaged torso, you can do so.

    HERE'S LIKE 90% OF THE SOURCE CODE!

    I don't have time to do a proper tutorial, but basically, you have to expose FlxSpine::getSprite() and create new string name in FlxSprite. A bit hacky, but works!

    cloneSlot("larm");
    cloneSlot("rarm");
    cloneSlot("body");
    cloneSlot("head_dead");
    		
    tieTogether("head_dead", "body");
    tieTogether("larm", "head_dead", new Vec2(0, -30), new Vec2( -110, 100));
    tieTogether("rarm", "head_dead",new Vec2(0,-40),new Vec2(90,70));
    

    Now that I think of... isn't that automatic, since requires to setup what you want to clone and where the libs are tied together. This should grab the position of the Spine bones. I attempted to do so, but it would need some tweaks because not all bones were created with this in mind.

    Well, that's it for now. Hope you enjoy this, in the case you are using skeletal animation in your characters it will be super useful.

    alt text

    Suggestions or improvements are very welcome!



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