I'm working on a game with Phaser. Basically there is a player sprite, that walks around and can pickup/hold up to 2 weapons.
I am trying to display one gun behind the player sprite, and one gun in front.
I can't figure out the best way to display them in their proper depth. I know Phaser is not capable of setting explicit z-index values for sprites. But maybe there is a way to compare each weapons z-index to the player's sprite, then adjust accordingly via moveUp or bringBack?
Here are the sprites:
player.sprite = this.game.add.sprite(500, 500, 'player');
gun1.sprite = this.game.add.sprite(550,525, 'gun');
gun2.sprite = this.game.add.sprite(525,525,'gun');
Each time you pick up a gun, call a function bringToTop();
For example, you want gun1 to be behind a player, and gun2 to be in front of the player.
// Call functions
gun1.bringToTop();
player.bringToTop();
gun2.bringToTop();
Related
I am new to Three.js. I am using this example with 6 image cube for panorama effect, where one can pan, zoom in and out around cubes.
https://threejs.org/examples/?q=panorama#webgl_panorama_equirectangular
I want to figure out how, at maximum zoom-in level, I can transition user into a different panorama cube (with different image source), mapped to this particular cube part. So I would, sort of, open the next scene to take user further to the next level in his journey.
This is nearly what Google Street View does when you click on arrows to move forward down the road.
I do not see many examples out there. I researched and saw this may be possible with creating 2 scenes? Any ideas how to make it functional I would appreciate.
Detecting WHEN to transition:
In the example given, the mouse events are all given. The zoom is handled in onDocumentMouseWheel by adjusting the camera's fov property. "Zoom In" reduces the fov, and "Zoom Out" increases it. It would be trivial to detect when the fov has reached a minimum/maximum value, which would trigger your transition to a new scene.
Detecting WHERE to transition:
The next step is determining into which new scene you will transition. You could do something hotspot-like, where you shoot a ray from the camera to see if it hit a particular place (for example a THREE.Sphere which you have strategically positioned). But for simplicity, let's assume you only have the 6 directions you mentioned, and that you're still using the example's mouse control.
Camera movement is handled in onDocumentMouseMove by updating the lat and lon variables (which appear to be in degrees). (Note: It seems lon increases without bounds, so for clarity it might be good to give it a reset value so it can only ever be between 0.0-359.99 or something.) You can get all math-y to check the corners better, or you could simply check your 45's:
if(lat > 45){
// you're looking up
}
else if(lat < -45){
// you're looking down
}
else{
// you're looking at a side, check "lon" instead
}
Your look direction determines to which scene you will transition, should you encounter your maximum zoom.
Transitioning
There are lots of ways you can do this. You could simply replace the texture on the cube that makes up the panorama. You could swap in a totally different THREE.Scene. You could reset the camera--or not. You could play with the lights dimming out/in while the transition happens. You could apply some post-processing to obscure the transition effect. This part is all style, and it's all up to you.
Addressing #Marquizzo's concern:
The lighting is simply a suggestion for a transition. The example doesn't use a light source because the material is a MeshBasicMaterial (doesn't require lighting). The example also doesn't use scene.background, but applies the texture to an inverted sphere. There are other methods one can use if you simply can't affect the "brightness" of the texture (such as CSS transitions).
I added the following code the the example to make it fade in and out, just as an example.
// These are in the global scope, defined just before the call to init();
// I moved "mesh" to the global scope to access its material during the animation loop.
var mesh = null,
colorChange = -0.01;
// This code is inside the "update" function, just before the call to renderer.render(...);
// It causes the color of the material to vary between white/black, giving the fading effect.
mesh.material.color.addScalar(colorChange);
if(mesh.material.color.r + colorChange < 0 || mesh.material.color.r + colorChange > 1){ // not going full epsilon checking for an example...
colorChange = -colorChange;
}
One could even affect the opacity value of the material to make one sphere fade away, and another sphere fade into place.
My main point is that the transition can be accomplished in a variety of ways, and that it's up to #Vad to decide what kind of effect to use.
I am making a HTML5 game using melonJS engine... which makes use of the canvas (imports and uses Tiled TMX maps)
I have created a puzzle using DOM elements (which I found much easier than making the puzzle in Tiled map editor). The player entity class (class that melonJS helps me draw to the canvas and animate) needs to be able to navigate the puzzle when it pops up...
Unfortunately, the DOM overlaps the player sprite since the puzzle sits apart from the DOM.
SIMPLIFIED FIDDLE
To fix this:
I thought I could adjust the player's z-index to be more than the DOM puzzle... but it still remains overlapped. Here, the player.z index and puzzle z index show that the z-index doesn't matter because they are on completely different layers... otherwise the player's 36 would clearly overlap the puzzle's 0:
var player = me.game.world.getChildByName("mainPlayer")[0];
log(player.z); //logs 36
log($("#puzzle").css("z-index")); //logs 0
I figured I could add a secondary canvas, and:
-- temporarily remove/hide the player's sprite (game.PlayerEntity) on the game canvas
-- add a new player sprite to the top layer canvas
-- give that player sprite focus/control - aka. bind the keys to that new player object
But that seems like a lot of unnecessary work
What I mean:
Is there a way to draw a canvas element such that I can see the player sprite?
this is a general question in building a game let's say i am building a game that it is not build under one and only scene but multiple continuous scenes. what is the best way to switch between those scene when the player reach the width of the canvas
pseudo code
var scene= 0;
function DrawScene(scene){
if(player.width >= CanvasWidth){
player.x= 0;
Scene.draw(scene);
scene++;
}
}
function UpdateWorld(){
DrawScene(scene);
}
this is just a pseudo code of how i thought about it i don't know how this is made in real life game can anyone give me a hint or show me some link that can describe this ? thank you
I think the best way to handle scene switching in a quite general case would be to handle some objects, let's call them switchers, that may have a visual or not ( => it's an invisible door or not), and which will switch scene when the hero overlaps them.
You'll soon want to add conditions to the switch (the hero has this key, is equipped with this weapon, ...).
And the switch should happen only if there's only 'enough' overlap, which could mean, say, that more than 50% of the bounding box of the hero is on top of the door.
For the pseudo-code, there are may ways to do a game loop, but at some point you'll have to do :
for each switch in switches {
if ( overlap( hero, switch ) && switch.canSwitch(hero) ) scene = switch.scene ;
}
i did a very small demo to demonstrate.
It is using my all-purpose fiddle as a base, so there's a bit of mess here :-) :
http://jsfiddle.net/gamealchemist/bC5JL/
use arrow keys and you will switch between two 'scenes' when overlapping the doors.
I'm writting a js game with "gameQuery" jQuery plugin, a shooting game.
While there are many bullets (for examples 100 or more), the animation would turn very slowly.
I use code blow for cycling moving DOM, means excute function per 20 millisecond. All bullets are stored in an array,
$.playground().registerCallback(function(){
for(var i = 0; i < bulletList.length; i++) {
//move bullet
...
}
}, 20);
How could I optimize my code to enhance efficiency? Thx!
Here are a few things I can think of:
Are you doing collision detection with the bullets. If yes this is
probably the point where things slow down since displaying hundreds
of sprites should be a problem in itself.
Are those bullet animated (with more than one frame?) If yes you may
want do try without animation to see how this impact the
performances.
If all the bullets move in the same direction at the same speed you
can put them all in a group and then move the group instead.
If they don't move in the same direction you can still put them into
a group. You will then detach this group before moving them all.
Once you are done you can just append you group again to the game.
This one is more complicated to implement but you could try to
detect that the player fired a series of bullets at regular
intervals in a given direction and represent them with a single
sprite with a repeating image of a bullet.
I am trying to program a web game in Jquery with the GameQuery plugin, problem is the GameQuery plugin has no support for per pixel collision detection only collision detection with bounding boxes. Is it possible to implement per pixel collision detection in javascript/Jquery?
I have a world map with countries and a player which is moved using the arrow keys, I want to be able to tell which country the player is in at any time and the countries are irregular shapes.
Or attack it from a different angle...so to speak...
Vectors may be your key, cool stuff happening at http://www.raphaeljs.com
maybe some sort of combo/integration could work?
alright here is kind of a solution:
assign each country a different color in you map (do not assign special colors to borders, borders should be colored in either color of the countries).
load that image into a canvas
var img = new Image();
img.src = 'worldmap.png';
var map = document.getElementById('canvas').getContext('2d');
map.drawImage(img, 0, 0);
after that you can display your normal map above that map (it is only a reference, and can be hidden under other stuff - use divs and z-index for that).
to determine in which country the player is just get the pixel-data at his position
data = map.getImageData(x, y, 1, 1).data;
key = data.join("-"); // something like "255-0-0-255" for red
country = countries[key];
it should be an rgba-array, you may then look up what country is assigned to that color.
so you will have to keep an array with the imploded rgba-values as key and the country names as value.
countries = {
"255-0-0-255" : "Russia",
"255-0-255-255" : "China",
...
};
this does only work in browsers that have the canvas object. so if you are doing this on iphone or android you are lucky!
The images are just pngs with solid colours for the country and transparency for the rest.
It is not possible.
You have, however, a not very complicated alternative: use polygon-based collision.
Use an image to present the countries to the user, but use a polygon internally.
You may find a very complete explanation about how to implement this on this forum entry (you may have to scroll down a bit, until you see the images). The guy asking the question there wanted to do more or less the same as you want todo (mouse position instead of character position).
Regards!