I am new to phaser and game development.
I followed the below tutorial.
https://medium.com/#michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6
I downloaded and Tiled software and made a simple map with a tileset I got from OpenGameArt.org. Unfortunately, nothing gets loaded on the browser screen, I just see a black rectangle instead of the map. I find no errors in the console. I am running this using XAMPP in Windows 10.
I will paste all my code here, let me know if you find anything wrong.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/phaser#3.15.1/dist/phaser-arcade-physics.min.js">
</script>
</head>
<body>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
The is the index.js file
const config = {
type: Phaser.AUTO, // Which renderer to use
width: 100, // Canvas width in pixels
height: 100, // Canvas height in pixels
parent: "game-container", // ID of the DOM element to add the canvas to
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
function preload() {
// Runs once, loads up assets like images and audio
this.load.image("tiles", "assets/tilesets/GoldBricks.png");
this.load.tilemapTiledJSON("map", "assets/tilemaps/mario.json");
}
function create() {
// Runs once, after all assets in preload are loaded
const map = this.make.tilemap({ key: "map" });
const tileset = map.addTilesetImage("GoldBricks", "tiles");
// Parameters: layer name (or index) from Tiled, tileset, x, y
const belowLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);
}
function update(time, delta) {
// Runs once per frame for the duration of the scene
}
EDIT: Below is the json file
{ "compressionlevel":-1,
"height":100,
"infinite":false,
"layers":[
{
"compression":"",
"data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUAAAAWAAAAFwAAABgAAAAZAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAVAAAAFgAAABcAAAAYAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAFQAAABYAAAAXAAAAGAAAABkAAAAaAAAAkQAAAJIAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAANgAAADYAAAA2AAAAA==",
"encoding":"base64",
"height":100,
"id":1,
"name":"Tile Layer 1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":100,
"x":0,
"y":0
}],
"nextlayerid":2,
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.3.2",
"tileheight":32,
"tilesets":[
{
"columns":16,
"firstgid":1,
"image":"..\/..\/..\/..\/..\/Users\/Shashank A C\/Downloads\/Goldbricksandgrass\/GoldBricks.png",
"imageheight":512,
"imagewidth":512,
"margin":0,
"name":"GoldBricks",
"spacing":0,
"tilecount":256,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.2,
"width":100
}
I am also seeing and error in the console now.
Uncaught TypeError: Cannot read property '0' of undefined
at StaticTilemapLayer.upload (phaser.js:74806)
at StaticTilemapLayerWebGLRenderer [as renderWebGL] (phaser.js:122959)
at WebGLRenderer.render (phaser.js:65133)
at CameraManager.render (phaser.js:114533)
at Systems.render (phaser.js:27184)
at SceneManager.render (phaser.js:46818)
at Game.step (phaser.js:109346)
at TimeStep.step (phaser.js:106091)
at step (phaser.js:66488)
UPDATE: Check this file structure --
https://next.plnkr.co/edit/OqywHzLC80aZMGeF
======
Need to see the JSON file to completely understand the issue, but I will just try to speculate. Make sure your JSON file has below settings correctly:
"tilesets":[
{
"image":"path/to/GoldBricks.png",
"name":"GoldBricks"
...
}
]
In some cases Tiled includes wrong/different path to the image file, so make sure to check that part. If there is no image path, embed it in Tiled.
In addition, the name value should match the first parameter of map.addTilesetImage(). Hope it helps!
I had a similar problem myself, the solution was going back to Tiled software and check: 'Embed tileset' on each tileset of the map.
Alright, I asked in the phaser community forum itself and got some help.
The tilemap layer is taller than the game canvas so the visible tiles are out of sight. The solution is to add the below code in the create function.
this.cameras.main.centerOn(800, 1300);
Related
I don't have any JSON files in this program only js and html my theory is that the program is running the html like a JSON file I'm using replit and kaboom to run the game
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>kaboom</title>
<meta charset="utf-8">
<style>
* {
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
{{kaboom}}
</body>
</html>
js code:
import kaboom from "kaboom";
// initialize context
kaboom();
scene();
const SPEED = 320
var METEORX = 2
const NiceX = 20
//onsole.log(str(METEORX))
// load assets
loadSprite("grass", "sprites/grass.png");
loadSprite("Player", "sprites/Player.png");
loadPedit("meteor", "sprites/meteor.pedit");
loadPedit("air Meteor", "sprites/air Meteor.pedit");
// add a character to screen
const meteor = add ([
sprite("air Meteor"),
pos(rand(0, width()), 40),
area(),
move(DOWN, 300),
"meteor",
"enemy",
cleanup(20)
])
var player = add([
// list of components
"player",
sprite("Player"),
pos(center()),
area(),
body(),
health(3)
]);
add([
rect(width(), 48),
"ground",
pos(0, height() - 48),
outline(4),
area(),
solid(),
color(127, 200, 255),
])
onCollide("player", "enemy", () => {
player.hurt(1.5)
})
loadPedit("ground meteor", "sprites/ground meteor.pedit");
var difficulty = 5;
onCollide("enemy", (niceMeteor) => {
addExplosion()
destroy(niceMeteor)
})
onKeyPress("space", () => {
if (player.grounded()) {
player.jump()
}
})
onKeyDown("d", () => {
player.move(SPEED, 0)
})
onKeyDown("a", () => {
player.move(-SPEED, 0)
})
The most likely scenario is that one of the sprites you have specified does not exist. In this case you should also see an error: ERROR: sprite not found: "<your sprite name here>". (I think it's a bug that kaboom tries to parse the response as JSON at all in this case, because it's getting a 404 response with content-type text/html).
Another possibility, however improbable, is that one of your sprite files is corrupt. Kaboom's .pedit file format is actually a JSON file with image data embedded as base64:
{
"version": "1",
"width": 32,
"height": 32,
"palette": [[0,0,0,255],[255,255,255,255],[255,255,128,255],[255,128,255,255],[0,128,128,255],[128,0,255,255],[255,0,128,255],[0,255,255,255]],
"anims": {
"Test": {"from":0,"to":1,"loop":true}
},
"frames":[
"data:image/png;base64,...",
"data:image/png;base64,..."
]
}
So if one of those files got corrupted during editing that could also cause this error. Normally in order to figure this out I would suggest you look at the stack trace for the error that is being thrown, which is visible in your web browser's developer console. However, Kaboom does not produce good stack traces for calls to loadPedit. So your best bet is probably to put some console.log('loading sprite XXX') statements before each load call. Once you know which pedit file is invalid you can rename that file from whatever.pedit to whatever.json and inspect the contents in your repl.
i'm using electron to make an app that get application icons.
so i used app.getFileIcon() to get the icon and with icon.toDataURL() and pass the image url with an event to index.html
and it works fine but when i increase the size of the image it gets blurry because the max size of icon by app.getFileIcon() can only be 32px(or 48 in MacOs or linux)
this is how it looks like (before height increase)
after height increase
Main.js
const { app, BrowserWindow, ipcMain, shell } = require('electron')
const path = require('path');
const { writeFileSync } = require('fs');
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
}
})
win.loadFile('public/index.html')
}
app.whenReady().then(createWindow)
// Get File Icons ------------------------------------------------
const filePath = path.normalize("C:\\Users\\hamid\\Desktop\\DualTouch\\NordVPN.lnk");
const realPath = shell.readShortcutLink(filePath).target
app.getFileIcon(realPath).then(icon => {
const ImgUrl = icon.toDataURL()
ipcMain.on('ImgUrl-request', (event)=>{
event.sender.send('ImgUrl-reply', ImgUrl)
})
writeFileSync('icon.png', icon.toPNG())
}).catch(err => console.log(err))
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DualTouch</title>
</head>
<body>
<div id="app"></div>
<script src="assets/js/app.js"></script>
<script>
const { ipcRenderer } = require('electron')
ipcRenderer.send('ImgUrl-request');
ipcRenderer.on('ImgUrl-reply', function (event, args) {
document.write(`<img src='${args}' />`)
});
</script>
</body>
</html>
Icon Url
Sadly the image size is inversely proportional to the quality, i.e the exposure of the picture elements of the image. So in order to get greater quality, I would suggest you get an image with more pixels and greater resolution.
You can't add information to an image that does not exist, but there are some really good upscaler's theses days, especially those based on AI.
For example going to this website -> https://bigjpg.com/ I was able to upscale your image to look like this ->
A quick search for tools for AI upscaling bring this up https://github.com/topics/upscaling , so maybe one of these options might be of use.
I am making a 2D platformer game in which I am using the Phaser-framework (version 3.15.1) to make life easier, and a Tiled map for the first level of the game. I have exported the map from Tiled as a .json file, and read into the main JS file. However, in my index HTML file, where all fo teh JS files are ran from it comes up with the following error:
Uncaught TypeError: Cannot read
property 'add' of index.html:17 undefined
at index.html:17
at index.html:20
Here is the relevant code:
<head>
<meta charset="UTF-8">
<title>Nightly Neighbours Using Phaser</title>
<script type="text/javascript" src = "js/phaser.js"></script>
<script type="text/javascript" src = "js/phaser-arcade-physics.js">
</script>
<script type="text/javascript" src = "js/Boot.js"></script>
<script type="text/javascript" src = "js/Preload.js"></script>
<script
type="text/javascript"src="js/NightlyNeighbours1WithPhaser.js">
</script>
<script type="text/javascript">
(function() {
game = new Phaser.Game(window.innerWidth *
window.devicePixelRatio,
window.innerHeight * window.devicePixelRatio, Phaser.AUTO);
game.state.add("Boot", Boot);
game.state.add("Preload", Preload);
game.state.add("NightlyNeighbours1WithPhaser", Main);
game.state.start("Boot");
})();
</script>
</head>
The error refers to lines 17 - 20
Thanks a lot!
In Phaser 3 there was a change from using states to instead using scenes. Based upon your code it looks like you're using Phaser 2 code with the Phaser 3 library.
There's a great official tutorial (with Part 5 starting with the code aspect, since it appears you might have your environment setup already) that covers Phaser 3.
From that tutorial, the defining of the Phaser.Game looks something like the following:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
You can also add new scenes to the game, by calling game.scene.add(...).
I have a very simple Bing maps program where I want to allow the user to draw one shape on the map, I've got the drawing tools and everything set up however Bing's events don't seem to fire in the correct way -
Drawing started - fires when I change my drawing tool to either a line or a polygon
Drawing Changed - fires when I change my drawing tool to either a line or a polygon
I simply want to clear the existing polygons from the map when I begin to draw a new polygon - however making a call to the getPrimitives function on the drawing manager clears the drawing mode, So then I thought about caching the drawing mode, reading the primitives to delete them and then resetting the drawing mode but then the setDrawingMode method on the drawing Manager calls the drawing started again which triggers the whole process again.
Does anyone know how to overcome this.
Does look odd that the drawing started event is firing when you click the mode. Will have the team look into that.
However, what you are trying todo would have some potential issues. If you clear the drawing manager when the user has started drawing a polygon on the map, that polygon will also be removed from the map as well. What you can do is when finished drawing a polygon, is move it to a separate layer, then you can clear that layer without effecting the drawing manager. If you are only interested in drawing polygons, you don't even need the drawing manager as you can handle this yourself using the drawing tools and a button. For example: http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CreateShape
Here is a code sample that achieves what you are asking using the drawing manager:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, baseLayer, drawingManager;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'YourBingMapsKey'
});
//Load the DrawingTools module
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
//Create a base layer to add drawn shapes.
baseLayer = new Microsoft.Maps.Layer();
map.layers.insert(baseLayer);
//Create an instance of the DrawingTools class and bind it to the map.
var tools = new Microsoft.Maps.DrawingTools(map);
//Show the drawing toolbar and enable editting on the map.
tools.showDrawingManager(function (manager) {
drawingManager = manager;
Microsoft.Maps.Events.addHandler(drawingManager, 'drawingEnded', function (e) {
//When use finisihes drawing a shape, removing it from the drawing layer and add it to the base layer.
var shapes = drawingManager.getPrimitives();
if (shapes) {
drawingManager.clear();
baseLayer.add(shapes);
}
});
Microsoft.Maps.Events.addHandler(drawingManager, 'drawingChanging', function (e) {
//When the drawing is changing, clear the base layer.
baseLayer.clear();
});
})
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
Here is a similar code sample that does this without the drawing manager and a custom button to start drawing a polygon.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, baseLayer, tools, currentShape;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'YourBingMapsKey'
});
//Create a base layer to add drawn shapes.
baseLayer = new Microsoft.Maps.Layer();
map.layers.insert(baseLayer);
//Load the DrawingTools module.
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
//Create an instance of the DrawingTools class and bind it to the map.
tools = new Microsoft.Maps.DrawingTools(map);
Microsoft.Maps.Events.addHandler(tools, 'drawingChanging', function (e) {
//When the drawing is changing, clear the base layer.
baseLayer.clear();
});
//When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
document.getElementById('myMap').onkeypress = function (e) {
if (e.charCode === 27) {
tools.finish(shapeDrawn);
currentShape = null;
}
};
});
}
function drawPolygon() {
//Stop any current drawing.
if (currentShape) {
tools.finish(shapeDrawn);
currentShape = null;
}
//Create a new polygon.
tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) {
currentShape = s;
});
}
function shapeDrawn(s) {
baseLayer.add(s);
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div><br />
<input type="button" onclick="drawPolygon()" value="Draw Polygon" />
</body>
</html>
I'm working with Paser.js on a Meteor.js server.
It worked wperfectly until I try to use tiled maps as described here.
Here is my code :
JS :
if (Meteor.isClient) {
Template.Game.onCreated(function()
{
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
preload: preload,
create: create,
update: update
});
var map;
var backgroundLayer;
var blockLayer;
var bg;
function preload()
{
// load all game assets
// images, spritesheets, atlases, audio etc..
game.load.tilemap('myTilemap', 'assets/tilemaps/scifi.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('myTileset', "assets/tilemaps/scifi_platformTiles_32x32.png");
}
function create()
{
map = game.add.tilemap('myTilemap');
map.addTilesetImage('scifi_platformTiles_32x32', 'myTileset');
backgroundLayer = map.createLayer('background');
blockLayer = map.createLayer('blocklayer');
}
function update()
{
}
});
}
HTML :
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<h1>Welcome to my first Phaser game!</h1>
{{> Game}}
</body>
<template name="Game">
<div id="phaserCanvas"></div>
</template>
And, when I try it on localhost:3000, I get :
Uncaught TypeError: Cannot read property '0' of undefined
From phaser.min.js:15. The line which generate that warning is
blockLayer = map.createLayer('blocklayer');
It seems that phaser can correctly read the 'background' layer information from the scifi.json, but not the 'blocklayer' one.
Here is an extract from the scifi.json :
{ "height":20,
"layers":[
{
"compression":"zlib",
"data": "[Some very long hashed key...]",
"encoding":"base64",
"height":20,
"name":"background",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"compression":"zlib",
"data":"[Some very long hashed key...]",
"encoding":"base64",
"height":20,
"name":"blocklayer",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
}],
"nextobjectid":1,
[...]
And I'm stil unable to find out what's the problem... Has anyone faced that before ?
More informations :
I use Atom as IDE
I tried with Phaser v2.0.1 and Phaser v2.4.2
Thanks you.
Seems the problem came from Tiled : the hashed key was compressed with Zlib, though it should not be compressed at all as phaser do not support it yet.
In tiled, go to Map -> Map Properties
There you will find Tile Layer Format. Change this to Base64 (uncompressed) and it should work :)