Overlap Without Physics

Checking overlap between two sprites can be done without enabling physics for them.


"use strict";
window.Overlap.state.menu = {
    create: function() {
        //create both objects and allow them to be dragged across the map
        this.box = mt.create("box_simple");
        this.box.inputEnabled = true;

        this.grass = mt.create("grass");
        this.grass.inputEnabled = true;

        this.text = mt.create("Text");

    update: function() {
        //checks, if the overlap function returns true and acts accordingly
        if (this.checkOverlap(this.box, this.grass)) {
        } else {

    //gets bounds form both sprites and returns true, if they intersect each other
    checkOverlap: function(spriteA, spriteB) {

        var boundsA = spriteA.getBounds();
        var boundsB = spriteB.getBounds();

        return Phaser.Rectangle.intersects(boundsA, boundsB);


Mouse drag any sprite over the other.

Full sample available here.

3 comments on “Overlap Without Physics

  1. This really is literally the best thing I’ve study this week!
    Just like, https://kultourinbaden.ch/ did of which in my opinion last few days, but that article has certainly manufactured my day very much better.
    Thank you for so much exclusive and insightful information, always!

Leave a Reply

Your email address will not be published. Required fields are marked *