Incorporating various Tiled layers into a Phaser game

Currently, I am working on developing a game using the Phaser engine and utilizing the 'Tiled' application to create my own tilemap.

One of the challenges I am facing is managing multiple layers within this tilemap. Specifically, I have 6 different layers:

  • "Background"
  • "WallBlocks"
  • "Grass"
  • "SpikeAnimation"
  • "DiamondAnimation"
  • "SlimeAnimation"

Below is an excerpt from my Game.js file:

SleepSim.Game = function (game) {
this.map;
this.Background;
this.WallBlocks;
this.Grass;
this.SpikeAnimation;
this.DiamondAnimation;
this.SlimeAnimation;
}
SleepSim.Game.prototype = {
create: function () {
    this.world.setBounds(0,0,5000,1000);

    this.map = this.add.tilemap('gameWorld');

    this.map.addTilesetImage('gameworld', 'tiles');

    this.Background = this.map.createLayer('Background');
    this.Background.resizeWorld();

    this.WallBlocks = this.map.createLayer('WallBlocks');
    this.Grass = this.map.createLayer('Grass');
    this.SpikeAnimation = this.map.createLayer('SpikeAnimation');
    this.DiamondAnimation = this.map.createLayer('DiamondAnimation');
    this.SlimeAnimation = this.map.createLayer('SlimeAnimation');
},
update: function() {
    if(this.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
        this.camera.y += 10;
    }
    else if (this.input.keyboard.isDown(Phaser.Keyboard.UP)){
        this.camera.y -= 10;
    }
    if (this.input.keyboard.isDown(Phaser.Keyboard.LEFT)){
        this.camera.x -= 10;
    }
    else if (this.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
        this.camera.x += 10;
    }
}
}

For testing purposes, I currently have the camera set up in a way that allows it to move freely through the map to check loading functionality.

If there are any issues with the formatting of this question, please excuse me as this is my first time posting! Any assistance or guidance would be greatly appreciated.

Answer №1

Dealing with a similar issue led me to the solution. The key is to assign a variable only for the initial layer, while the subsequent layers don't require variables.

this.worldMap = this.add.tilemap('gameWorld');

this.worldMap.addTilesetImage('gameworld', 'tiles');

this.backgroundLayer = this.worldMap.createLayer('Background');
this.backgroundLayer.resizeWorld();

this.worldMap.createLayer('WallBlocks');
this.worldMap.createLayer('Grass');
this.worldMap.createLayer('SpikeAnimation');
this.worldMap.createLayer('DiamondAnimation');
this.worldMap.createLayer('SlimeAnimation');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I show a personalized cookie banner based on the user's location in a NextJs application?

I have a NextJs 12 application with URLs domain.com and domain.com/es. We implemented the OneTrust cookie banner in _document.ts as shown below: <Head> <Script id="one-trust" strategy="befor ...

Modifying an object's value before pushing it into an array in JavaScript

I've been struggling to find the right keyword to search for my issue. I've spent hours trying to figure out what's wrong, but it seems like a simple case of pushing an object into an array. The problem arises when I try to log the values of ...

Creating a jsp page content with jquery and retrieving request parameters

I am facing an issue with my JSP page where I need to pass the value of request.getParameter("cfgname") to another content page so that it loads correctly. Currently, the code is displaying null instead of the parameter. This is the main JSP page with par ...

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

Creating a stunning art exhibition using React Native

Currently, I am in the process of creating a gallery component that utilizes both the scrollview and image APIs. I'm curious about how the scrollview manages its child components when it scrolls down. Does it unmount the parts that are not currently ...

Node-archiver: A tool for dynamically compressing PDF files

I am currently working on a project that involves generating multiple PDF files using pdfkit. I have an array of users, and for each user, I create a report using the createTable() function. The function returns a Buffer, which is then passed to archiver t ...

React.js onClick does not display the dropdown

Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure w ...

Ensuring the absence of values in deconstructed variables within an object

In my quest to efficiently destructure the end_time property from the this.props.auction object, I encountered the code snippet below. const {auction: {auction: {end_time}}} = this.props; The problem with this code is that the constant will be undefined ...

Sending variable from JavaScript via AJAX to PHP results in an undefined variable

My goal is to pass the variable rating_index to my PHP code and then send it to the database. Although the actual code for rating_index is quite long, I can confirm that right before the AJAX call, I console.log(rating_index) and it displays an integer val ...

How to transfer data using props through the ":to" attribute of a router link in Vue.js

I am facing an issue with creating a router-link in Vue and passing a route name as a prop. What I am trying to achieve is the following: <template> <div> <router-link :to="myProps">Login</router-link> </div> </tem ...

Navigation bar failing to show all content on Safari web browser

When navigating to this website, http://www.togethermutualinsurance.co.uk, using any browser except for Safari on Windows, the menu displays correctly. However, in Safari, the title of the menus and submenus with images does not display properly. Despite ...

What could be causing the issue with my code attempting to conceal a parent div?

I attempted to follow the guidance found here, tweaking it to suit my requirements, but unfortunately, it's not producing the desired result. I am endeavoring to conceal a parent div that contains two child elements. These parent divs are part of a li ...

"Exploring the use of conditional rendering in React to dynamically hide and show components based

I am currently immersed in the world of React/Redux, focusing on an e-commerce project. This particular application offers two payment methods: cash and card payments. On the product display page, both payment icons are visible. However, I am seeking a sol ...

What's the best way to integrate Bootstrap into my HTML document?

Hey there, I'm new to the coding world and just started learning. I could use some assistance with including Bootstrap v5.1 in my HTML code. The online course I'm taking is using an older version of Bootstrap, so I'm having trouble finding t ...

Angular 2 - The creation of cyclic dependencies is not allowed

Utilizing a custom XHRBackend class to globally capture 401 errors, I have encountered a dependency chain issue in my code. The hierarchy is as follows: Http -> customXHRBackend -> AuthService -> Http. How can this problem be resolved? export cla ...

What is the best way to accurately measure the distance between two points on a 360 image using A-Frame technology?

Is there a way to accurately measure the distance between two points in a 360 picture of an interior using the a-frame.io framework? We attempted converting the unit system of a-frame to centimeters and used two points with known dimensions as a reference ...

The useEffect function is failing to execute, leading to an issue with an undefined variable

Attempting to retrieve a specific string with the help of useRouter, then utilizing that same string to access a particular document from Firebase is my current goal. This sequence of actions is supposed to take place within the confines of the useEffect f ...

How can you use JavaScript regex to verify that the last three characters in a string are

What method can be used to confirm that a string concludes with precisely three digits? accepted examples: Hey-12-Therexx-111 001 xxx-5x444 rejected examples: Hey-12-Therexx-1111 Hey-12-Therexx-11 Hey-12-Therexx 12 112x ...

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

Error: Cannot execute products.map in React JS because it is not a function

I'm encountering a TypeError: products.map is not a function error while attempting to iterate or map through the objects in my current state. I am fetching products from an API and storing them in state with the intention of displaying these objects. ...