I was doing my game in phaser 3 when I went to add a tilemap created in tiled, I followed several tutorials, I did and redid the code several times and even then it always gives me the same invalid ID error.
unsuccessful attempts:
Tried to manually make the tilemap;
Tried using JSON files;
I tried to use a single layer;
I tried to use the names according to the tiled layers;
I tried using different names;
here follows the code:
import './phaser'
const config = {
type: Phaser.AUTO,
parent: "phaser-example",
width: 1824,
height: 960,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
export const game = new Phaser.Game(config)
function preload()
{
this.load.image('terrain', './complementos/tilemaps/terrainBasic.png')
this.load.tilemapTiledJSON('map', './complementos/tilemaps/basicLand.json')
}
function create()
{
const teste = [[0,1,2],[0,1,2],[0,1,2]]
const map = this.make.tilemap(teste)
map.addTilesetImage('terrainBasic','terrain', 32, 32)
const layer = map.createLayer(0,'land', 0, 0)
}
I don't know if it changes much but I was using react together with phaser 3, but my react code only had styling.
The problem is, that your are not providig the correct parameters for the tilemap function. You have to pass a Phaser.Tilemaps.MapData checkout the documentation, here https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html or you could checkout the examples on the phaser.io website.
Checkout especially, some Demos on the official website, they show many different ways how to use tiles(maps) (with working examples): https://phaser.io/examples/v3/category/tilemap
Here is a snippet, showing how to use a array, for the tiles:
var config = {
type: Phaser.AUTO,
width: 5*16,
height: 3*16,
zoom:2,
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/super-mario.png');
}
function create ()
{
// Load a map from a 2D array of tile indices
var level = [ [ 0, 0, 0, 0, 0],[ 0, 14, 13, 14, 0],[ 0, 0, 0, 0, 0]];
var map = this.make.tilemap({ data: level, tileWidth: 16, tileHeight: 16 });
var tiles = map.addTilesetImage('tiles');
var layer = map.createLayer(0, tiles, 0, 0);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Related
I'm unable to switch scenes in Phaser 3 (I've tried scene.switch and scene.start), but none of these appear to be methods on Phaser.Scene in Phaser 3. How do you change scenes in Phaser 3? Any help would be greatly appreciated, as I cannot find any alternative methods. Thank you!
// My Game entry point
HomePage.ngZone.runOutsideAngular(() => {
this.config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
},
parent: 'game',
scene: [MazeScene, MainScene],
physics: {
default: 'matter',
matter: {
debug: false,
gravity: {
y: 0.0,
x: 0.0,
},
},
},
};
this.phaserGame = new Phaser.Game(this.config);
});
I have tried both scene.start('main'),and scene.swap('main'), but both of these methods do not seem to appear in the Phaser.Scene class in Phaser 3.
As it turn out you need to reference the scene from sys.game.scene. This is what ultimately worked for me.
this.scene.sys.game.scene.switch('mazeScene', 'mainScene')
I'm currently trying to implement Google Maps JavaScript MarkerClusterer on a website.
I'm using Interface Renderer to override a couple of default configuration parameters.
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
};
let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);
Please note that I'm adding markerClusterer plugin via unpkg. So I must declare the cluster this way: let cluster = new markerClusterer.MarkerClusterer(config); (as stated in the "Install" section of the official documentation) (see last line of my above code bit).
This code works great, but I'd also like to override gridSize property from Interface GridOptions in order (well, I hope... I'm not even sure this option will give me what I expect; I'm not english native and given description is not totally clear to me...) to get bigger clusters and less individual markers on my map.
I'm struggling for a couple of reasons:
I'm not familiar with they way the code has to be set up,
the documentation is EMPTY and there's NO supplied example code on how to achieve what I want,
can't find any help on stack overflow, tutorials (blogs, social networks, ...). Really, all I could find were 100k of obsolete ways to do it but that doesn't work when you use Interface Renderer. Here's an example:
var markerClusterer = new MarkerClusterer(map, markers, {
gridSize: 10,
maxZoom: 9, // maxZoom set when clustering will stop
imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
});
So I tried several things but nothing is working:
let config = { map, markers, renderer, GridOptions: { gridSize: 10 } };
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
gridSize: 10,
}),
};
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
GridOptions: ({ gridSize = 10 }),
// gridSize: 10,
};
Can anyone help me? Thanks!
Finally:
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
};
let algorithm = new markerClusterer.GridAlgorithm({gridSize: 60});
let config = { map, markers, renderer, algorithm };
let cluster = new markerClusterer.MarkerClusterer(config);
And also, Yes, gridSize property does generate bigger clusters and less individual markers on map if you increase its value (default: 40).
This may be in the series of dumb questions, but when I look at https://deck.gl/docs/api-reference/geo-layers/mvt-layer, I do not understand how to make a MVTLayer that fetches self-hosted tiles without React pieces. Can someone help? This would feel to be even large interest now that buildless is also becoming a thing in web programming.
What I would like to achieve is a simple HTML (e.g. index.html) file that uses a script tag like <script src="https://unpkg.com/deck.gl#8.4.5/dist.min.js"></script> and the example from the aforementioned Deck.gl that looks like (I changed the URL)
import DeckGL from '#deck.gl/react';
import {MVTLayer} from '#deck.gl/geo-layers';
function App({viewState}) {
const layer = new MVTLayer({
data: `https://<selfhostedurl>/{z}/{x}/{y}.pbf`,
minZoom: 0,
maxZoom: 23,
getLineColor: [192, 192, 192],
getFillColor: [140, 170, 180],
getLineWidth: f => {
switch (f.properties.class) {
case 'street':
return 6;
case 'motorway':
return 10;
default:
return 1;
}
},
lineWidthMinPixels: 1
});
return <DeckGL viewState={viewState} layers={[layer]} />;
}
but instead make this a without React. I see it requires a bit more code on how to define a canvas HTML element and use it. Maplibre example would be OK too. :) There is one Maplibre example at https://codepen.io/snickell/pen/dypOWzj.
You can use the Scripting API for more 'simple' examples, here you have an example of using MVTLayer.
Deck.gl offers a standalone bundled version of the library - a native JavaScript scripting interface like that of d3.js.
As simple as
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://maps-api-v2.us.carto.com/user/public/carto/sql/{z}/{x}/{y}?source=SELECT * FROM ne_10m_railroads_public&api_key=default_public&format=mvt',
initialViewState: {
latitude: 41.4,
longitude: 2.18,
zoom: 5,
},
controller: true,
layers: [
new deck.MVTLayer({
data: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt',
getLineColor: [192, 192, 192],
lineWidthMinPixels: 1
})
]
});
I'm having a problem changing scenes when I reach the area that should trigger the second level in the game I'm developing. For some reasons instead of showing the second level the game shows a black screen and no errors on the console. I think that the answer to my question is here (http://www.html5gamedevs.com/topic/37617-trouble-changing-scenes-in-phaser-3/) as the guy who asked the question had my problem and managed to resolve it, but I don't understand his last post.
the way I call the second scene in my first scene is the function:
PassaggioLivello() {
if(this.player.sprite.x > 15400){
this.scene.start(MainScene2);
}
}
And both scenes are included in the config file:
import {MainScene} from "./main-scene.js";
import {MainScene2} from "./main-scene.js";
let config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
backgroundColor: "#000c1f",
parent: "game-container",
scene: [MainScene, MainScene2],
pixelArt: true,
physics: { default: "matter" },
plugins: {
scene: [
{
plugin: PhaserMatterCollisionPlugin, // The plugin class
key: "matterCollision", // Where to store in Scene.Systems, e.g.
scene.sys.matterCollision
mapping: "matterCollision" // Where to store in the Scene, e.g. scene.matterCollision
}
]
}
};
let game = new Phaser.Game(config);
Can you please help me? I don't understand my error.
The this.scene.start() method requires the identifying key of the scene you want to start--not the scene object itself.
Each scene being imported should have a key declared in the constructor method, like this:
constructor() {
super({ key: 'game' });
}
Then, you should be able to start the scene you want by calling this.scene.start('game');
I am developing a simple app, where i set a list of consts that i want to use in my development. so i created a file like this:
consts.js
export default {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10
}
and i want to access the consts in a separate file on the vue instance:
window.onload = function () {
new Vue({
el: '#appMonster',
data: {
startClicked: false,
monsterLife: {
width: '100%',
life: 100
},
youLife: {
width: '100%',
life: 100
}
},
methods: {
...
for example inside methods, how can i do it?
I already tried to import the file at the top before and after onload, but i always get this error: unexpected identifier, any way to solve this?
I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.
Thank you
I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.
If that's the case, don't use import/export. Just:
consts.js:
const constants = {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10
}
Other file, provided you imported <script src="consts.js"></script> before, simply do:
// somewhere before: <script src="consts.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#appMonster',
data: {
startClicked: false,
monsterLife: {
width: '100%',
life: constants.MAX_HEALTH // <==== use constants.PROPNAME
},
youLife: {
width: '100%',
life: 100
}
},
methods: {
See plunker demo here.