ThinQbator - problem solving / invention platform social media



  • Hello haxeflixel Community, I've been wanting to make a dev log for a while now especially with all of the cool little tricks I've learned throughout my project as well as @Claudio-Ficara Dev log which was very helpful and felt like if I could do somthing similar That'd be fantastic!
    alt text
    So currently the project is focused only on mobile (IOS and android) but will eventually get support for desktop and then web with the power of haxe.

    It uses Libraries such as

    • Extension web View
    • Native Text
    • Date Time
    • Extension networking
    • flixel - ui and addons

    So in the future I'd love to dev log about my use with some of these libraries in terms of this project.

    thank you for reading my short little post here is the code for scrolling in the menu state for ThinQbator. With the static function and variables you should be able to use it for any project you may need scrolling for both Mouse and Keyboard!

    package;
    
    import flixel.FlxState;
    import flixel.FlxG;
    import flixel.FlxSprite;
    
    class PlayState extends FlxState
    {
    	public static var scrollSpeed:Float = 0;
    	public static var scrollStartY:Float = 0;
    	public static var scrollOldY:Int = 0;
    	//if camera is scrolling used to have buttons not go off during
    	public static var scrollPress:Bool = false;
    	
    	override public function create():Void
    	{
    		super.create();
    		//scroller object
    	add(new FlxSprite(0,FlxG.height - 50).makeGraphic(50, 50));
    	}
    
    	override public function update(elapsed:Float):Void
    	{
    		super.update(elapsed);
    		//min screen scroll and max screen scroll set for each update
    		scrollCamera(0, FlxG.height - 50);
    	}
    	
    		public static function scrollCamera(min:Int,max:Int):Void
    	{
    	var friction:Float = 0.95;
    	var i:Int = 0;
    	var maxSpeed:Int = 300;
    	var snapDis:Int = 5;
    	var swipeDis:Int = 0;
    	scrollPress = false;
    	//drag
    #if mobile
    if (FlxG.touches.getFirst() != null)
    {
    //move to far away init
    if (FlxG.touches.getFirst().justPressed) scrollStartY = FlxG.camera.scroll.y;
    if(FlxG.touches.getFirst().pressed == true && FlxG.touches.getFirst().justPressed == false && FlxG.touches.getFirst().justReleased == false) //&&  Math.abs(FlxG.touches.getFirst().screenY - scrollOldY) > 3)
    {
    scrollPress = true;
    if(FlxG.camera.scroll.y == scrollStartY && Math.abs(scrollSpeed) < 0.1) scrollPress = false; 
    
    FlxG.camera.scroll.y += (FlxG.touches.getFirst().screenY - scrollOldY) * -1;
    scrollSpeed = 0;
    }
    scrollOldY = FlxG.touches.getFirst().screenY;
    }
    #else
    //move to far away init
    if (FlxG.mouse.justPressed) scrollStartY = FlxG.camera.scroll.y;
    
    if(FlxG.mouse.justPressed == false && FlxG.mouse.pressed && FlxG.mouse.justReleased == false) //&& Math.abs(FlxG.mouse.screenY - scrollOldY) > 3)
    {
    scrollPress = true;
    if(FlxG.camera.scroll.y == scrollStartY && Math.abs(scrollSpeed) < 0.1) scrollPress = false; 
    
    FlxG.camera.scroll.y += (FlxG.mouse.screenY - scrollOldY) * -1;
    scrollSpeed = 0;
    }
    scrollOldY = FlxG.mouse.screenY;
    #end
    if (Math.abs(scrollStartY - FlxG.camera.scroll.y) > 5) scrollPress = true;	
    //swipe
    for (swipe in FlxG.swipes)
    {
     if (swipe.duration > 0.05 && Math.abs(swipe.startPosition.y - swipe.endPosition.y) > 5)
     {
    scrollSpeed = (swipe.startPosition.y - swipe.endPosition.y) * (0.016 / (swipe.duration * 5)) * -8;
     //distance to calculate whether snap is vaild or not
     swipeDis = Math.floor(swipe.startPosition.y - swipe.endPosition.y);
     //trace("scroll Speed " + scrollSpeed);
     //trace("frictionTick" + Std.string(scrollSpeed - scrollSpeed * friction));
     scrollPress = true;
    }
    }
    //max speed
    if(scrollSpeed > maxSpeed) scrollSpeed = maxSpeed;
    if(scrollSpeed < -maxSpeed) scrollSpeed = -maxSpeed;
    scrollSpeed *= friction;
    FlxG.camera.scroll.y += -scrollSpeed;
    	 //scroll camera restraints
     if (FlxG.camera.scroll.y < min)
     {
    	 FlxG.camera.scroll.y = min;
    	 scrollSpeed = 0;
     }
     if (FlxG.camera.scroll.y > max)
     {
    	 FlxG.camera.scroll.y = max;
    	 scrollSpeed = 0;
     }
    	}
    }
    

    Happy to answer any questions, and let me know if you would like more haxeflixel example code :)



  • Example code is always great to have. Maybe if we have several tips we can make a ui demo for the web.

    Why did you choose to use a game engine to develop an app ?



  • Hey @Agustín-Pérez-Fernández I'm glad you liked the Example Code! Currently ThinQbator does not have a web version so I don't have any tips for a ui demo for the web but if you have any question about the ui for the app I'd love to answer them. And the reason to use the game engine haxeflixel to create the app is because, It's very stable for each platform, easy to prototype and great performance more then ThinQbator would ever need.



  • Hey mate, thanks for the shoutout!

    I stumbled upon your game on the @haxeflixel twitter and the UI looks great. Actually, got a bit happy to know that haxeflixel could be used for a app, being a game oriented framework. Kudos on you!

    Also, I love the code snippet, hope we can start a trend to have other devs share cool pieces of code that could benefit us all!

    I notice your UI is way too sharp, probably from a downscaling. Not biggie at all, but have you tried antialiasing mate?



  • Hey @Claudio-Ficara You deserve all of the shoutouts possible, Thank you so much on all of the insanely nice feedback! The ui is by no credit of myself I had an amazing team of two Designers work day and night in Sketch to be able to make it look so great, I just was able to implement in haxeflixel which was a challenge in of itself but I see full potential in haxeflixel being used for more than just a game engine and I would love to be the person to prove that :D.

    designer interface for app which is then uploaded to invision and seen by me in which I implement it into the app

    In reply to the Down scaling, Yes almost all of the assets in the app have been brought in at 4x and scaled down automatically with custom functions in order to fit properly in the gui/ui. Though the image I put in the dev log is from neko so it looks way worse than the actual android version ( I have updated the image to an android screenshot of the app login screen now so take a look at the difference) though I am still having problems with ios which is where the real issues come into play I have tried antialiasing with both antialiasing="4" in project xml as well as FlxG.camera.antialiasing = true; and FlxG.stage.quality = flash.display.StageQuality.BEST; if that counts. ios is blurry so I've been on a hunt for the past week to find a fix. So if you have any more tips with Antialiasing I'd extremely appreciate any support because I'm stumped haha.

    Also I totally agree with the haxeflixel community extremely benefiting from devs being able to share code and other tricks, you inspired me to do so and I'd love to continue the trend!

    Speaking of code sharing, I played the demo for your game and I absolutely loved it had a great time with me and my brother. But I noticed that everything was so beautiful and looked so great except for the FlxText in the game. You may be transitioning to full bitmap text which would fix the issue but if you would like a solution for crisp FlxText as well as any other devs I wrote a premade function to scale up text and size it down in order for the text to not be pixelated for ThinQbator but it could apply to any other haxeflixel application/game :)

    Normal Text

    Custom ThinQbator FlxText

    0_1502851898992_270c1579-41d2-4b9b-b6cc-6bdc95289d83-image.png

    here is the code:

    	public static function createText(?textString:String = "", ?x:Int = 0, ?y:Int = 0, ?size:Int = 24, ?color:FlxColor = FlxColor.WHITE,?align:FlxTextAlign=LEFT,FieldWidth:Int=0):FlxText
    	{
    		var text = new FlxText(0,0);
    		text.setFormat("assets/data/proximanova-regular-webfont.ttf", size * 2, color, align);
    		//scale down
    		text.scale.set(0.5, 0.5);
    		text.updateHitbox();
    		text.antialiasing = true;
    		text.fieldWidth = FieldWidth * 2;
    		text.text = textString;
    		text.setPosition(x - text.width / 4, y - text.textField.textHeight / 4);
    		//add to state
    		FlxG.state.add(text);
    		return text;
    	}
    

    And if anyone wants to check my demo results for the image here is the create function

    	override public function create():Void
    	{
    		super.create();
    		var text = createText("Hello HaxeFlixel!");
    		text.screenCenter();
    		
    		var text2 = new FlxText();
    		text2.text = "Hello HaxeFlixel!";
    text2.setFormat("assets/data/proximanova-regular-webfont.ttf", 24);
    		text2.screenCenter();
    		add(text2);
    	}
    


  • Hey mate! The updated screenshot looks delicious!

    I was wondering myself ifFlxG.stage.quality = flash.display.StageQuality.BEST and setting in project "antialiasing X" makes a difference. Look like so in some platforms?

    I don't want to hijack your tread much, but thanks for trying it! And yes, the text is a issue. Well, everything that scales up is an issue.

    Not sure if doing it the right way... but check this full hd screenshot. Game resolution is 1024x576, so naturally scales up a bit blurry. Using hi-res versions of images and using scale.set(0.5,0.5) and antialiasing, helps to preserve quality when it scales up.

    This is great, because different resolutions could be used. One for the game, one for the UI.

    The only problem I'm facing with this method is that doing animations, using a FlxTween for example, is that you need to remember the scale, since 1,1 isn't the default anymore. But I think that FlxSprite could be hacked to... add quality ratio or something?

    Like:

    setSamplingFactor(0.5);
    
    setSamplingFactor(scale)
    {
    _internalscale.x = _internalscale.y = scale;
    }
    

    ... then all FlxSprite calls to image changes, will take into account this factor ( ie spr.scale +=_internalscale)

    I guess I'm gonna try this one out. Keep updating your dev log in the meanwhile!



  • Hey Claudio, I'm thrilled you tried out the scaling trick and Thanks for the support I will of course continue to update the dev log as long as it continues to help devs :D . So to get right down to business in order to have the tween work properly and not be offset right after the scale use updateHitbox(); this should make the FlxSprite be in the correct position and hitbox. Therefore Fix Tweening!

    Example

    • ratio
    public static function scaleRat(obj:FlxSprite, scale:Float)
    	{
    		obj.scale.set(scale, scale);
    		obj.updateHitbox();
    	}
    
    • Dimensions
    	public static function scaleDemXY(obj:FlxSprite, dx:Int, dy:Int):FlxSprite
    	{
    	obj.scale.set(1 / obj.width * dx, 1 / obj.height * dy);
    	obj.updateHitbox();
    	return obj;
    	}
    

    Try this out and let me know if it works out :) .As always feel free to add on pose any questions.



  • Gonna try ASAP! Thanks for helping out a bro! Keep posting about your project!


Log in to reply
 

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