I've created a Window with ScrollPane and ScrollBar using libgdx's Scene2d API. It "nearly" works - what I mean is that I can resize window and ScrollBars are showing when needed, but ScrollBars disappear as soon as window (or ScrollPane) loses focus. Is this by design? I can't find any way to keep them displayed when out of focus.
My build.gradle says the following:
ext {
appName = 'Test'
gdxVersion = '1.5.3'
roboVMVersion = '1.0.0-beta-03'
box2DLightsVersion = '1.3'
ashleyVersion = '1.3.1'
aiVersion = '1.4.0'
}
I'm not using ashley, ai, box2d and I'm not building for iOS, so all entries except for appname and gdxVersion are probably meaningless, but I'm including them just in case they can somehow interfere with Scene2d.
Yes, it is by design, but it's a toggle option. Use scrollPane.setFadeScrollBars(false);.
Related
I am only using the desktop Application, no mobile.
I am experimenting with letting the user set the screen resolution during run time. I give him the Display Modes available and he applies one. This part actually works. The problem occurs when i save this mode and try to set this display mode the next time they launch the game.
I am using preferences to store the mode the user selected. I am unable to access preferences before the Create method in my Game class, or in the DesktopLauncher Object, where you normally set up the config file and pass it into the application. So my DesktopLauncher looks like this.
val config = Lwjgl3ApplicationConfiguration()
config.setFullscreenMode(Lwjgl3ApplicationConfiguration.getDisplayMode())
Lwjgl3Application(MainGame(), config)
I use the current screen resolution on the creation of the application. Then in my Create method in my MainGame class i get the mode they set from preferences and i set it like so...
override fun create() {
var modes = Gdx.graphics.displayModes.toList()
val mode = Gdx.graphics.displayMode
val preference: Preferences = Gdx.app.getPreferences("screenPreference")
val screenWidth = preference.getInteger("width", mode.width)
val screenHeight = preference.getInteger("height", mode.height)
val refreshRate = preference.getInteger("refreshRate", mode.refreshRate)
modes = modes.filter { it.width == screenWidth }
modes = modes.filter { it.height == screenHeight }
modes = modes.filter { it.refreshRate == refreshRate }
if (modes.isNotEmpty()) {
Gdx.graphics.setFullscreenMode(modes[0])
}
....
}
To summarize i get the list of modes, i pull from preferences what was set last, and i filter the list according to what was in preferences. This should leave one item left in the list and i apply it. If for some reason the list is empty, then i don't set it, or there is no preference set i just apply the current mode again.
This is where the weird stuff happens. I have checked all the numbers when creating my screens and cameras, and they are all correct. I do receive the correct resolution, but the application doesn't render correctly. Below are a couple examples of what happens.
In the first image you see the bounds of the application to the screen. My application only renders in the bottom corner, and the rest is black. What happened to achieve this effect is i started the application with a smaller resolution than my native resolution, so 1280x1024, then in my create method i set the application full screen mode to 1920x1080 before building the rest of my application. I have checked my cameras and my viewports, and they all have the resolution 1920x1080, but the image is not filling the entire screen.
And a second.
This one is what happens when i reverse the settings. So i start at native resolution 1920x1080, and in my create method i set it to 1280x1024, again before creating the rest of my application. This gives me black bars on both sides of the image like id expect, but the application is HUGE, and only a portion of it fits in the window, the rest goes out of bounds, as depicted by the dotted lines.
It will remain like this the entire time, unless i change the resolution while the application is running, it will then correct itself for the rest of the applications life.
I am confounded by this effect i am getting, and am looking for an answer as to why, or how to fix it.
I found the issue that was causing the image to render incorrectly. I was setting the display mode in the create() function in my main game class. This function is not run on the rendering thread, and you do not want to use Gdx.graphics on anything other than the rendering thread, as described in the libgdx wiki https://github.com/libgdx/libgdx/wiki/Threading
There is a function where you can pass in a lambda to be run on the rendering thread.
Gdx.app.postRunnable {
Gdx.graphics.setFullscreenMode(Gdx.graphics.getDisplayMode(modes[0]))
}
After passing that into postRunnable the game renders correctly on launch.
I'm using Phaser 2.5.0 (tried 2.4.8 also) and I'm trying to create fully responsive game using phaser library.
Everything is ok when I refresh page, here is image:
but when I change rotation to portrait dialog message is not ok, image:
When I refresh page using portrait mode I get ok dialog:
So problem is when I resize browser window.
Here is code for init phaser game:
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);
Tried also:
var game = new Phaser.Game("100%", "100%", Phaser.AUTO);
Here is create function located in main.js:
create: function(){
console.log('create');
this.game.antialias = true;
this.game.stage.smoothed = true;
this.input.maxPointers = 1;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.minHeight = 0;
this.game.time.advancedTiming = true;
},
So to tell again problem is when I resize browser window but when I do refresh then it's not working ok. Game must support resize.
Here is one simple example which is giving almost same result, on refresh is ok but when doing resize is not ok: https://jsfiddle.net/CroDac/tv010u0t/
Thank you
There was/is an old, but apparently not fixed, bug in iOS that caused (causes?) this. There are several workarounds on the net, on of them is here:
https://github.com/scottjehl/iOS-Orientationchange-Fix
From the description:
This fix works by listening to the device's accelerometer to predict
when an orientation change is about to occur. When it deems an
orientation change imminent, the script disables user zooming,
allowing the orientation change to occur properly, with zooming
disabled. The script restores zoom again once the device is either
oriented close to upright, or after its orientation has changed. This
way, user zooming is never disabled while the page is in use.
Maybe this can help you....
I am looking to make my cross platform mobile application more native-feeling and I was wondering if there was a way to modify the way the Spark Scroller behaves on overscroll (when the user scrolls beyond the bounds of the viewport). Basically, the current implementation matches iOS almost exactly but feels out of place on Android (iOS "bounces", showing area not in the viewport. Android stops at the bounds of the viewport and the edges glow).
Is there a built in way to modify this behavior? I have not come across any options yet, but I would like to make sure that is the case before I go and extend Scroller to try to add such functionality.
You can kill the pull and bounce effects pretty easily with this:
scroller.mx_internal::bounceEnabled = false;
scroller.mx_internal::pullEnabled = false;
I do not think you can prevent the user from scrolling past the edges very easily though. It looks like you'll want to extend Scroller and override the method:
mx_internal function performDrag(dragX:Number, dragY:Number):void
Let the super.performDrag() run and then check to see if viewport.horizontalScrollPosition or viewport.verticalScrollPosition are out of bounds (< 0 or > (height/width - contentWidth/Height)).
I want to create a dialog or alert box, where a DisplayObject would take and force the focus, until an okay button or something releases the lock. thanks.
The easy way to do this is to make your "dialog" as big as the stage, with a whacking great transparent area around the dialog itself.
The transparent area can listen for any mouse clicks, and just swallow them (which will prevent them being picked up by stuff further back in the display list).
To show the alert, just stick it on top of everything else, When the user closes it, take it away again.
If you are using flex and actionscript, simply use a SkinnablePopUpContainer
var alt:CustomPopUp = new CustomPopUp();
alt.open(this,true) //the second variable is for modal, which will disable view
this.enabled = false; //this will grey out the parent view and provide visual focus to your popup.
To do this, you will need to disable access to all objects under your 'alert' DisplayObject. There are multiple ways of doing this, here 2 I can think off:
Loop through the display list and disable any display objects under your alert depth wise.
Cheat it with a blocker. When you display your alert, display another clip (could have alpha set to 0 ) that blocks the user from hovering/clicking objects. The blocker might need a bit of setup( buttonMode = true, useHandCursor = false, etc. )
This 'modal' behavior has been around for some so there might be no need to reinvent the wheel, depending of your current setup.
If you're using the Flex framework, you've got the functionality in, for Flash you can use the Alert Manager from the Yahoo! Flash Astra Components:
Goodluck,
I am trying to put a vertical scrollbar onto a dynamic TextField in Flash CS4. When I do this in Scene 1, everything works just fine. However, if I move the TextField+Scrollbar to Scene 2, it breaks. The errors I get when I run the code indicate that Flash is loading the scrollbar right away and then trying to find the associated TextField. The problem is that, since the TextField doesn't load until you get to Scene 2, Flash throws an error.
I tried a lot of things to solve this issue. What it mostly came down to was that I needed to create the TextField and Scrollbar in actionscript (instead of from the component library) so that I could control when each was created. To create the TextField, I typed:
//create a textfield for the story
import flash.text.TextField;
var story_txt:TextField = new TextField();
//story_txt.multiline = true;
story_txt.x = 154;
story_txt.y = 233.5;
story_txt.width = 348;
story_txt.height = 104.5;
story_txt.border = true;
story_txt.type = "dynamic";
story_txt.backgroundColor = 0xffffff;
story_txt.background = true;
story_txt.wordWrap = true;
story_txt.multiline = true;
and to create the scrollbar, I then typed:
import fl.controls.UIScrollBar;
//add the story_txt to the stage
addChild(story_txt);
var mySb:UIScrollBar = new UIScrollBar();
mySb.direction = "vertical";
// Size it to match the text field.
mySb.setSize(story_txt.width, story_txt.height);
// Move it immediately to the right of the text field.
mySb.move(story_txt.x, story_txt.height + story_txt.y);
// put them on the Stage
mySb.scrollTarget = story_txt;
//mySb.scrollTargetName = "story_txt";
stage.addChild(mySb);
The only problem is that this code only works if I make the ScrollBar horizontal and turn off wordwrap. For some reason, the vertical scrollbar will not work with wordrap on (and w/o wordwrap, Flash thinks that there's no need for a vertical scrollbar, as it sees only a single line of text.
Getting a textfield w/a scrollbar should be a simple process, but this is really out of hand. Any ideas on how to get the ScrollBar to work when wordWrap is turned on?
Basically you should never use Scenes in Flash. There are a lot of known issues with them.
This thread might help.
Scene usage is generally bad practice. They are a legacy feature left in to keep current versions of flash compatible with earlier versions. If you must use the IDE to place things on stage you should use distinct frames on the main timeline in place of scenes, and place things that need the timeline to animate inside their own movieclips. The flash IDE actually reduces all the scenes down to one timeline at compile time any way but with many anomalies that wouldn't be present in manual timeline manipulation.
disadvantages of scenes from adobe: http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7eb3a.html