In my project I am attempting to play a music track when the screen switches to the game over screen. It starts when it is supposed to, however, the track continuously loops even when looping is set to false. I tried also using the OnCompletionListener, However I either set it up incorrectly or It just didnt work for some reason or another
This is the variable in my create method.
music = Gdx.audio.newMusic(Gdx.files.internal("gameover.mp3"));
This is the track set up in the render method
music.setVolume(.2f);
music.setLooping(false);
music.play();
The problem seems to be you're calling play() in the render() method, try calling it on the show() method or use a boolean to flag that you're already playing the music and don't play it again.
I'm new to Phaser3 and before starting a crazy project, I want to know how I should start, switch between scenes. I saw that there are several functions, start, launch, switch, run, resume, pause, etc.
Example, lets say I want to have 2 scenes, a Menu and a Game. I boot on the Menu and I want to go to the Game scene and if I click on a button then come back to the Menu scene.
I've achieved this by calling the start function, but I noticed that the all, init, preload and create functions are called every time and therefore I'm loading all the images, setting all the listener over and over again.
This seems wrong, should I be using the launch or switch functions and pausing and resuming? But how do I hide the previous scene?
Thanks in advance.
This question might be a little too broad, but with Phaser 3 in mind, it still depends upon what purpose your menu serves.
I think most games have a main menu that will generally be called when the game first starts, and then won't be called again.
If this is an in-game menu, where settings can be changed or part of the game can be reset/restarted, then it might not make sense to redirect to a completely different scene.
With Phaser 3's support of multiple scenes - with Dev Log #119 and Dev Log #121 probably being the best current sources of information - another option would be to start a new scene within the current scene to handle this.
However, if this is really just UI, there's nothing to stop you from creating an overlay, instead of spawning an entire scene.
If you're concerned about performance I might think about whether the entire menu needs to be called, or if a simplified menu would work. Also, make sure that you're preloading assets before you're in the menu and main game.
I personally use Boot > Preloader > Splash Screen > Main Menu > Main Game scenes, where the Preloader loads the majority of the assets I'll need. This has the downside of a longer initial load, but the upside of minimal loading after this point.
Scene Transitions
How I handle these in my starter templates is to add the scenes to the Scene Manager when creating the scene. Then I transition by start to the first scene.
this.scene.add(Boot.Name, Boot);
this.scene.add(Preloader.Name, Preloader);
this.scene.add(SplashScreen.Name, SplashScreen);
this.scene.add(MainMenu.Name, MainMenu);
this.scene.start(Boot.Name);
Then I simply keep starting the next scenes as needed.
this.scene.start(Preloader.Name);
For another game that uses multiple scenes I ended up creating the following function (TypeScript) to handle this:
private sleepPreviousParallelScene(sceneToStart: string): Phaser.Scene {
if (this.uiSceneRunning !== sceneToStart) {
// Make sure that we properly handle the initial state, when no scene is set as running yet.
if (this.uiSceneRunning !== "") {
this.scene.get(this.uiSceneRunning).scene.sleep();
}
const newScene = this.scene.get(sceneToStart);
newScene.scene.start();
this.scene.bringToTop(sceneToStart);
this.uiSceneRunning = sceneToStart;
return newScene;
} else {
return this.scene.get(this.uiSceneRunning);
}
}
In the game I was using this for, I was trying to replicate a standard tab interface (like what's see in the Dev Logs above with the file folder-like interface).
Ok, here is the deal. In phaser 3, the start function actually SHUTS DOWN the previous scene as it starts the new one. This is why you see the init, preload ext every time. If however, you 'launch' your scenes instead, then they will not go through the whole shut down, restart sequence. You can move them to the top or bottom, set to receive input or not, etc. HOWEVER, BEWARE! As of phaser 3.16, sleep or pause of a scene does NOT shut down the update. As a result, if you launch a scene, then sleep it, it basically does nothing other than maybe set the flag, saying it's asleep even though it really isn't. So any update processing will continue in any launched scene. You can short circuit the update with a flag of some sort at the beginning, (that's what I've resorted to), but the other gotcha is the camera size. All the scenes must therefore have the same camera size or they will render (even if "sleeping") and mess up your display.
So, bottom line, it's going to be messy until sleep and pause actually work.
In the simple Dialog below:
// choice of layout has no impact:
Container cont=new Container(new TextModeLayout(3, 1));
//Container cont=new Container(new BoxLayout(BoxLayout.Y_AXIS));
TextComponent firstName=new TextComponent().label("First Name").text(person.firstname);
TextComponent lastName=new TextComponent().label("Last Name").text(person.lastname);
TextComponent cost=new TextComponent().label("Cost per Session").text(person.getCostString());
cost.getField().setConstraint(TextArea.DECIMAL);
// NOTE HERE
// doesn't work: // works:
cont.add(firstName); // cont.add(firstName.getField());
cont.add(lastName); // cont.add(lastName.getField());
cont.add(cost); // cont.add(cost.getField());
Dialog.show("Edit Client", cont, new Command(CANCEL), new Command(OK));
Nothing appears in the Dialog unless I add the TextField instead of the TextComponent to my container at the NOTE HERE comment. This means I lose the nice appearance of the labelled input fields (yes I know I could label them myself, but they wouldn't look as good on different devices). My choice of layout manager at the top does not affect this issue (I've tried several). I can't find evidence online to conclude there's an incompatibility here, adding TextComponents and other InputComponents works fine on a Form, just not in a Dialog.
I'm having the same problem in another Dialog that uses PickerComponents. The PickerComponent doesn't appear unless I add the Picker itself, and then the Picker spawned from a Dialog looks all wrong. I'm hoping the simpler code question above will answer this quandary as well.
It's worth noting I've made no theme changes and this problem is noted in both the Android and Apple skins as well as on an actual Android phone. Thanks in advance for any help!
You shouldn't do input in a Dialog as it creates a very problematic user experience. If you would like things to look like they are in a dialog you can use styles and layouts to make a Form feel like a Dialog but you shouldn't use a Dialog.
The reason this fails is a bit complicated but here are the high level problems with using a dialog:
Dialogs don't grow implicitly - This is a huge problem for text input as the component needs space to resize with input and even more so for the animated TextComponent which needs to shift things around. The size of a Dialog is determined when it's shown and that's a big problem
This becomes a bigger problem on Android where the screen resizes during input and distorts the dialog completely. It's one of those things you'll only see on the device because it's really hard to simulate the virtual keyboard.
Scrollability is hard in a Dialog and text components need a scrollable parent so you can scroll between the various edit components
Picker component uses a form of Dialog to show input and this can collide with your dialog
Dialogs are hard to get right for suspend/resume behavior. Suspend/resume happens when the app is minimized or sent to the background. E.g. say you have an incoming call while typing in the dialog. When you go back to the app we want to show the last form. If we show the dialog it will block and we won't know which parent form to show anyway. So when an app is suspended dialogs are just disposed in the default code generated in the main class. It makes more sense.
Sorry if it looks like a noob question, but i'm new to titanium so some concepts are foreign to me.
I have a script called entry.js which is called from details.js using require('entry.js').
Now within entry.js i play a sound, depending on what entry is selected.
var player = Ti.Media.createSound({url:"/sounds/0"+e.id+".mp3"});
player.play();
That part is ok. The problem is when i go back to the details screen, and select another entry, the new sound overlaps the old one.
So i need a global value or object that i can pass down to entry.js to make sure if the sound is playing or not.
But if i declare a global TI.Media object in details.js i get an error in entry.js:
Cant find variable player
So the question is, how do i detect in a sub javascript file that an instance of audio is already running?
You can check whether the audio is playing using the isPlaying() method or try to stop the playing music when you get back to the details screen. You can use stop() method to stop the sound. It will stops playing the audio and resets the playback position to the beginning of the clip.
If you want to create a global variable or pass variable from one window to another, refer the following links
Passing parameters from currentWindow to the new window in Titanium
Passing variable between windows
GridPanel not rendering correctly
I'm using EditorGridPanels on dynamically generated web pages. ExtJS does not control the ViewPort.
When I wrap the Grid generation code in Ext.onReady(), the grids render perfectly.
If I do not wrap it in Ext.onReady() it renders with subtle layout issues like
the grids are a little too wide
the top toolbar gets cut off on the right
the rows don't quite fit and they shift when clicking a cell
I have tried forcing the grids' layout to get recalculated once the page loads...
(function(){}
var grid = ...
[ ... ]
Ext.onReady(function(){
grid.doLayout();
});
)();
...but this does not work.
The reason I'm trying to avoid placing Grid initialization inside Ext.onReady() is that sometimes pages take a long time to fully load every resource, and in these cases the pages look fully loaded apart from the blank spaces where the grids eventually get rendered to!
Any suggestions on what I might try? Right now a complete redesign of the page is not in scope, so I'm looking for something I can do to get the grid to layout like it does when initialized inside onReady()!
Thanks
You could perhaps mask the page initially with 'loading..' message and remove this in the onReady().
If you're getting issue outside of on the onReady it would indicate something has not loaded when you're trying to render components, this in my experience will lead to further issues down the line.