I am converting flash to html5 files using createjs; in our flash we are having 5 scenes. After completing one scene we have to load the other scene.
For each scene we have one js file. For the first scene I am loading the first js file; for the second scene I have to load the second js file. I am unable to know when the first is going to be complete.
Cant you just call a function when the tween is complete?
var tween = new cretejs.Tween();
tween.get( target).to({x: some_x}).call( onTweenComplete);
function onTweenComplete(){
//Tween is done
}
Related
As the title says.. Is there a way to stop all running scenes when starting a scene from the "game" object?
For now, when I call game.scene.start(...) from outside a Scene object, nothing happens. My current solution is to keep a global variable pointing to the latest started Scene (In all my scenes, I reset that global variable in the create() function with something like currentScene = this;) So when I want to start a new Scene I call currentScene.scene.start(...). But obviously that's not reliable because I could forget to reset my global variable (currentScene) in all my scenes, etc...
EDIT:
To clarifiy what I'm trying to acheive: I'm making a small multiplayer game with a couple scenes and a few GameObjects. I've a "socket" module that handles all traffic between the client and the server (I'm using socket.io). I would want to do something like:
this.socket.on('game_end', (data) => {
// Server decides when the game stops and sends an event to all clients.
// Here I need to stop the currently running scene (i.e. SceneInGame)
// and show the "game finished / results" scene.
this.game.scene.start('SceneGameEnd');
// ^ That doesn't work. SceneInGame keeps playing and SceneGameEnd doesn't start
});
You really shouldn't use game.scene at all in Phaser 3 (indeed, this won't even work as of Phaser 3.50.0). Scene operations should go via the ScenePlugin, which is accessible as this.scene from within any Scene. I.e. this.scene.start('otherScene') will stop the current Scene, then start the given one, in order, at the next game step. Where-as game.scene.start just blasts on through with no care to the game step or what's calling it.
There is no way to 'stop all running scenes' however, but then unless you have started multiple Scenes (via launch or a similar method), then there won't actually be any other running scenes. Show some actual code, then we can give a more targeted response.
There's a way I was able to do this, that at least works with Phaser 3.55 by accessing the current scene manually and starting the new scene from there.
For example: game.scene.keys.myCurrentScene.scene.start('SceneGameEnd')
This will effectively call the this.scene of myCurrentScene and replace that scene by starting SceneGameEnd
Where myCurrentScene would be the key of the current running scene.
You can see the scene key at game.scene.keys property where all scenes are listed by key name.
However, this would only work if you know what's the key of the current running scene.
Probably there's a way to get the current running scene but I can't answer that one.
There is however a more of a brute force workaround if you don't know the key of the current running scene. You could run a loop through all scenes, regardless if it is running or not, from the array of game.scene.scenes and call scene.stop on all scenes and then run just the one you need.
For example:
// Stop all scenes
game.scenes.forEach((scene) => {
const key = scene.scene.key; // This is not a typo, the scene here is more like a "game" object, so the scene actually is under the "scene" property.
game.scene.stop(key);
})
// After stopping all scenes, then you can start only the scene you need
game.scene.start('SceneGameEnd');
I need some help understanding what the best practice is for creating a PIXI.extras.AnimatedSprite from spritesheet(s). I am currently loading 3 medium-sized spritesheets for 1 animation, created by TexturePacker, I collect all the frames and then play. However the first time playing the animation is very unsmooth, and almost jumps immediately to the end, from then on it plays really smooth. I have read a bit and I can see 2 possible causes. 1) The lag might be caused by the time taken to upload the textures to the GPU. There is a PIXI plugin called prepare renderer.plugins.prepare.upload which should enable me to upload them before playing and possibly smoothen out the initial loop. 2) Having an AnimatedSprite build from more than one texture/image is not ideal and could be the cause.
Question 1: Should I use the PIXI Prepare plugin, will this help, and if so how do I actually use it. Documentation for it is incredibly limited.
Question 2: Is having frames across multiple textures a bad idea, could it be the cause & why?
A summarised example of what I am doing:
function loadSpriteSheet(callback){
let loader = new PIXI.loaders.Loader()
loader.add('http://mysite.fake/sprite1.json')
loader.add('http://mysite.fake/sprite2.json')
loader.add('http://mysite.fake/sprite3.json')
loader.once('complete', callback)
loader.load()
}
loadSpriteSheet(function(resource){
// helper function to get all the frames from multiple textures
let frameArray = getFrameFromResource(resource)
let animSprite = new PIXI.extras.AnimatedSprite(frameArray)
stage.addChild(animSprite)
animSprite.play()
})
Question 1
So I have found a solution, possibly not the solution but it works well for me. The prepare plugin was the right solution but never worked. WebGL needs the entire texture(s) uploaded not the frames. The way textures are uploaded to the GPU is via renderer.bindTexture(texture). When the PIXI loader receives a sprite atlas url e.g. my_sprites.json it automatically downloads the image file and names it as mysprites.json_image in the loaders resources. So you need to grab that, make a texture and upload it to the GPU. So here is the updated code:
let loader = new PIXI.loaders.Loader()
loader.add('http://mysite.fake/sprite1.json')
loader.add('http://mysite.fake/sprite2.json')
loader.add('http://mysite.fake/sprite3.json')
loader.once('complete', callback)
loader.load()
function uploadToGPU(resourceName){
resourceName = resourceName + '_image'
let texture = new PIXI.Texture.fromImage(resourceName)
this.renderer.bindTexture(texture)
}
loadSpriteSheet(function(resource){
uploadToGPU('http://mysite.fake/sprite1.json')
uploadToGPU('http://mysite.fake/sprite2.json')
uploadToGPU('http://mysite.fake/sprite3.json')
// helper function to get all the frames from multiple textures
let frameArray = getFrameFromResource(resource)
let animSprite = new PIXI.extras.AnimatedSprite(frameArray)
this.stage.addChild(animSprite)
animSprite.play()
})
Question 2
I never really discovered and answer but the solution to Question 1 has made my animations perfectly smooth so in my case, I see no performance issues.
With Phaser I am working on a game. This game rewards the player with an item that is not capable of being preloaded. After an Ajax call I was hoping to load the image and then display it in the phaser animation. Is there anyway to do this?
Flow: Game is playing
Game Completes and Ajax Call is made.
Ajax responds with which image to use.
Phaser loads image and displays what they won.
You can use Phaser's loader to load an image at anytime by invoking
game.load.image('referenceName', 'assets/pics/file.jpg');
then you can set an event like the ones at
http://phaser.io/examples/v2/loader/load-events
game.load.onLoadComplete.add(aFunctionToCall, this);
But most importantly don't forget to actually tell the loader to start after you've set everything up.
game.load.start();
Lazzy loading in Phaser 3 can be done by using the Phaser.Loader.LoaderPlugin(scene)
lazzyLoading:function(){
var name = 'card-back';
// texture needs to be loaded to create a placeholder card
const card = this.add.image(WIDTH/2, HEIGHT/2, name);
let loader = new Phaser.Loader.LoaderPlugin(this);
// ask the LoaderPlugin to load the texture
loader.image(name, 'assets/images/demon-large1.png');
loader.once(Phaser.Loader.Events.COMPLETE, () => {
// texture loaded so use instead of the placeholder
card.setTexture(name)
});
loader.start();
}
I am creating a static scene with a lot of objects and I want to save as image after it is rendered. How do I do that in THREE.js r69?
Most probably, you are not going in the right direction.
if you have some function like this
function animate() {
requestAnimationFrame(animate);
render ();
}
The render is doing it's work all the time.
When you are seeing the scene unfinished, it's because the meshes haven't finished loading, not because the render hasn't finished rendering.
So, you have to listen for some onload event on the models that you are loading, that will depend on the method that you use to load them (and that you don't explain, so I can't help you more)
Given the code in your reply, it isn't clear when you add the mesh to the scene. Anyway, I would try something in the line of
function loaderCallback() {
mesh = new THREE.Mesh (...
scene.add (mesh);
requestAnimationFrame(saveImage);
render ();
}
the function invoked at requestAnimationFrame should be called when render finishes.
I just started my first JavaScript game project, and I am not sure what is the best way to load assets (images and sounds) in JS. The problem is I am using inheritance, so there is a problem with loading asset when needed ( example: Paddle extends Entity ):
Paddle:
function Paddle( layer )
{
Entity.call(this, layer);
}
Paddle.prototype.SetAnimations = function()
{
this.image.onload = // INITIALIZE this.sprite using this.image
this.image.src = "js/assets/paddle/blue/paddle_blue_idle.png";
};
Entity:
function Entity(layer)
{
this.SetAnimations();
layer.add( this.sprite );
}
So the problem here is, when I am using Paddle constructor, the first thing is to call Entity ( parents ) constructor. Then Entity constructor use Paddle.prototype.SetAnimations to set image source and after load, with KineticJS i am creating Sprite using this loaded Image. But before this happens, Entity tries to add this.sprite to the layer ( and the sprite isnt already initialised ).
My question is, what is the best way in JS to load assets ( before every scene/at whole game startup OR #runtime using maybe event listeners?? ). Any help would be appreciated.
That depends on the size of your game / your assets. I personally load my assets before the game / at a loading screen. I use PxLoader for loading assets. I then store the images / assets in a big array in my game and access them when I need them.