How do I get a character to enter a building in Phaser 3?

I am making a top down RPG styled game using Tiled and Phaser 3. I have already made a map in Tiled for the city and store. Also, I have already set the game objects for the location of the store where the player is suppose to go in order to enter the store and the location where the player is supposed to appear. The thing I am having trouble figuring out the code I am suppose to use in order to facilitate this function, as well as going back to city map. One more thing, If there are any other ideas on how to go about this I am all ears.

Update: I got the character to load on the map with the function I already have but problem is that I can’t move my character.

Here is the function I have so far:

// When the player walks into the store.

  player.onCollide = new Phaser.signal();

  Store.onCollide.add(enterstore,this);



  function enterstore(player){

 	const map2 = this.make.tilemap({ key: "map2" });

  	const tileset2 = map.addTilesetImage("store", "tiles2");



  	const storeLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);



  	storeLayer.setCollisionByProperty({ collides: true });



  	this.physics.add.collider(player, storeLayer);



  	storeLayer.setDepth(10);



  	const SpawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

  	const Store = map.findObject("Objects", obj => obj.name === "store");



  	player = this.physics.add

    .sprite(SpawnPoint.x, SpawnPoint.y, "atlas", "misa-front")

    .setSize(30, 40)

    .setOffset(282, 202);



 };

edited Feb 1 at 19:10

asked Jan 2 at 18:08

ChetD90

163

add a comment |

Update: I got the character to load on the map with the function I already have but problem is that I can’t move my character.

Here is the function I have so far:

// When the player walks into the store.

  player.onCollide = new Phaser.signal();

  Store.onCollide.add(enterstore,this);



  function enterstore(player){

 	const map2 = this.make.tilemap({ key: "map2" });

  	const tileset2 = map.addTilesetImage("store", "tiles2");



  	const storeLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);



  	storeLayer.setCollisionByProperty({ collides: true });



  	this.physics.add.collider(player, storeLayer);



  	storeLayer.setDepth(10);



  	const SpawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

  	const Store = map.findObject("Objects", obj => obj.name === "store");



  	player = this.physics.add

    .sprite(SpawnPoint.x, SpawnPoint.y, "atlas", "misa-front")

    .setSize(30, 40)

    .setOffset(282, 202);



 };

edited Feb 1 at 19:10

asked Jan 2 at 18:08

ChetD90

163

add a comment |

Update: I got the character to load on the map with the function I already have but problem is that I can’t move my character.

Here is the function I have so far:

// When the player walks into the store.

  player.onCollide = new Phaser.signal();

  Store.onCollide.add(enterstore,this);



  function enterstore(player){

 	const map2 = this.make.tilemap({ key: "map2" });

  	const tileset2 = map.addTilesetImage("store", "tiles2");



  	const storeLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);



  	storeLayer.setCollisionByProperty({ collides: true });



  	this.physics.add.collider(player, storeLayer);



  	storeLayer.setDepth(10);



  	const SpawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

  	const Store = map.findObject("Objects", obj => obj.name === "store");



  	player = this.physics.add

    .sprite(SpawnPoint.x, SpawnPoint.y, "atlas", "misa-front")

    .setSize(30, 40)

    .setOffset(282, 202);



 };

edited Feb 1 at 19:10

asked Jan 2 at 18:08

ChetD90

163

Update: I got the character to load on the map with the function I already have but problem is that I can’t move my character.

Here is the function I have so far:

// When the player walks into the store.

  player.onCollide = new Phaser.signal();

  Store.onCollide.add(enterstore,this);



  function enterstore(player){

 	const map2 = this.make.tilemap({ key: "map2" });

  	const tileset2 = map.addTilesetImage("store", "tiles2");



  	const storeLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);



  	storeLayer.setCollisionByProperty({ collides: true });



  	this.physics.add.collider(player, storeLayer);



  	storeLayer.setDepth(10);



  	const SpawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

  	const Store = map.findObject("Objects", obj => obj.name === "store");



  	player = this.physics.add

    .sprite(SpawnPoint.x, SpawnPoint.y, "atlas", "misa-front")

    .setSize(30, 40)

    .setOffset(282, 202);



 };

// When the player walks into the store.

  player.onCollide = new Phaser.signal();

  Store.onCollide.add(enterstore,this);



  function enterstore(player){

 	const map2 = this.make.tilemap({ key: "map2" });

  	const tileset2 = map.addTilesetImage("store", "tiles2");



  	const storeLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);



  	storeLayer.setCollisionByProperty({ collides: true });



  	this.physics.add.collider(player, storeLayer);



  	storeLayer.setDepth(10);



  	const SpawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

  	const Store = map.findObject("Objects", obj => obj.name === "store");



  	player = this.physics.add

    .sprite(SpawnPoint.x, SpawnPoint.y, "atlas", "misa-front")

    .setSize(30, 40)

    .setOffset(282, 202);



 };

// When the player walks into the store.

  player.onCollide = new Phaser.signal();

  Store.onCollide.add(enterstore,this);



  function enterstore(player){

 	const map2 = this.make.tilemap({ key: "map2" });

  	const tileset2 = map.addTilesetImage("store", "tiles2");



  	const storeLayer = map.createStaticLayer("Tile Layer 1", tileset, 0, 0);



  	storeLayer.setCollisionByProperty({ collides: true });



  	this.physics.add.collider(player, storeLayer);



  	storeLayer.setDepth(10);



  	const SpawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

  	const Store = map.findObject("Objects", obj => obj.name === "store");



  	player = this.physics.add

    .sprite(SpawnPoint.x, SpawnPoint.y, "atlas", "misa-front")

    .setSize(30, 40)

    .setOffset(282, 202);



 };

javascript json html5 phaser-framework tiled

edited Feb 1 at 19:10

asked Jan 2 at 18:08

ChetD90

163

edited Feb 1 at 19:10

asked Jan 2 at 18:08

ChetD90

163

edited Feb 1 at 19:10

asked Jan 2 at 18:08

ChetD90

163

asked Jan 2 at 18:08

ChetD90

163

asked Jan 2 at 18:08

ChetD90

163

add a comment |

1 Answer
1

active

oldest

votes

My solution for this is quite simple actualy. (Im not using Phaser, but the concept is the same)

In Tiled I put Rectangles in a seperate object layer. These rectangles cover areas that lead to a different location like doors, holes in the ground etc.
In the properties of the object I define a target location.

Code wise you simply check for collision with those rectangles. If the player collides with one of those you move him to the target location (seperate Tiled file or different coordinates on the current map).

answered Jan 3 at 15:22

Pavel Slesinger

31919

This is really good advice thank you, I know that I must preload the map of the store but do I have to use the setCollisionByProperty in order to check for the collision of the object?

– ChetD90
Jan 5 at 19:07

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011135%2fhow-do-i-get-a-character-to-enter-a-building-in-phaser-3%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

My solution for this is quite simple actualy. (Im not using Phaser, but the concept is the same)

answered Jan 3 at 15:22

Pavel Slesinger

31919

This is really good advice thank you, I know that I must preload the map of the store but do I have to use the setCollisionByProperty in order to check for the collision of the object?

– ChetD90
Jan 5 at 19:07

add a comment |

My solution for this is quite simple actualy. (Im not using Phaser, but the concept is the same)

answered Jan 3 at 15:22

Pavel Slesinger

31919

This is really good advice thank you, I know that I must preload the map of the store but do I have to use the setCollisionByProperty in order to check for the collision of the object?

– ChetD90
Jan 5 at 19:07

add a comment |

My solution for this is quite simple actualy. (Im not using Phaser, but the concept is the same)

answered Jan 3 at 15:22

Pavel Slesinger

31919

My solution for this is quite simple actualy. (Im not using Phaser, but the concept is the same)

answered Jan 3 at 15:22

Pavel Slesinger

31919

answered Jan 3 at 15:22

Pavel Slesinger

31919

answered Jan 3 at 15:22

Pavel Slesinger

31919

answered Jan 3 at 15:22

Pavel Slesinger

31919

This is really good advice thank you, I know that I must preload the map of the store but do I have to use the setCollisionByProperty in order to check for the collision of the object?

– ChetD90
Jan 5 at 19:07

add a comment |

This is really good advice thank you, I know that I must preload the map of the store but do I have to use the setCollisionByProperty in order to check for the collision of the object?

– ChetD90
Jan 5 at 19:07

This is really good advice thank you, I know that I must preload the map of the store but do I have to use the setCollisionByProperty in order to check for the collision of the object?

– ChetD90
Jan 5 at 19:07

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk