Fixing the Tile Image Bug in TCJSGame – A Debugging Story

🎮 Live Demo: https://tcjsgame.vercel.app/sample/index.html

The Problem: Image Tiles Wouldn't Render

I was building a Flappy Bird game using my own game engine called TCJSGame. Everything worked perfectly - the bird, the pipes, the scoring system. The bird was an image. The pipes were images. But when I tried to create a level using the TileMap class with image tiles, nothing appeared on screen.

No errors. No crashes. Just... nothing.

The tiles were supposed to show a beautiful brick wall background for a platformer level I was designing. Instead, I got an empty canvas where the tiles should have been.

The Investigation

I started debugging by checking the most obvious things first:

1. Are the image paths correct? Yes, the same images loaded fine as regular Components.
2. Is the TileMap.show() method being called? Yes, the method executed without errors.
3. Are the tiles being added to the game world? Yes, they were in the comm array.

So why weren't they rendering?

I added console logs inside the Tile class constructor:

class Tile extends Component {
    constructor(tx, ty, tid, com) {
        super(com.width, com.height, com.color, com.x, com.y)
        console.log("Tile created with type:", com.type)
        console.log("Tile color/src:", com.color)
    }
}

The output showed type: undefined. That was the clue.

Understanding the Component Constructor

The Component class in TCJSGame looks like this:

class Component {
    constructor(width = 0, height = 0, color = null, x = 0, y = 0, type) {
        this.width = width;
        this.height = height;
        this.color = color;  // For rectangles: CSS color, For images: file path
        this.type = type;    // "image", "text", or null
        // ... more code

        if (type === "image") {
            this.image = new Image();
            this.image.src = this.color;  // Load image from file path
        }
    }
}

The 6th parameter type is critical. When type === "image", the Component knows to treat color as an image file path and create an Image object. Without the type parameter, the Component defaults to treating color as a CSS color and tries to draw a rectangle.

The Bug in the Tile Class

Here was my original Tile class:

class Tile extends Component {
    constructor(tx, ty, tid, com) {
        super(com.width, com.height, com.color, com.x, com.y)
        // Missing: com.type in the super call!
        this.tx = tx;
        this.ty = ty;
        this.tid = tid;
    }
}

The super() call only passed 5 arguments: width, height, color, x, and y. The 6th argument type was completely missing.

This meant that even though com.type was "image", that information never reached the Component constructor. The Component had no way of knowing it should load an image.

The Fix

The correction was simple once I understood the problem:

class Tile extends Component {
    constructor(tx, ty, tid, com) {
        // Added com.type as the 6th parameter
        super(com.width, com.height, com.color, com.x, com.y, com.type)
        this.tx = tx;
        this.ty = ty;
        this.tid = tid;
    }
}

Now when a Tile is created with com.type === "image", that value gets passed to the Component constructor. The Component then correctly initializes an Image object and loads the file from com.color (the file path).

Testing the Fix

After making this change, I ran the TileMap test again:

let tiles = [
    null,
    new Component(32, 32, "brick.png", 0, 0, "image"),
    new Component(32, 32, "grass.png", 0, 0, "image")
]

let levelMap = [
    [1,1,1,1,1],
    [1,0,0,0,1],
    [1,0,0,0,1],
    [1,1,1,1,1]
]

let tilemap = new TileMap(display, levelMap, tiles, 800, 600)
tilemap.show()

This time, the brick and grass images appeared perfectly. The tiles rendered as images, not as colored rectangles.

Why This Bug Was Hard to Find

Several factors made this bug difficult to track down:

1. No Error Messages - JavaScript didn't throw any errors. The Component constructor simply treated the missing type as undefined and defaulted to rectangle rendering.

2. Silent Failure - The tile objects existed. They had the correct positions and dimensions. They just rendered invisibly.

3. Partial Success - Other parts of the game worked fine. Regular Components loaded images correctly, so I assumed TileMap would work too.

4. Inheritance Complexity - The bug was in how Tile extended Component, not in either class individually.

Lessons Learned

1. Always Check Constructor Parameters

When extending a class, make sure you're passing all required parameters to super(). Missing even one parameter can cause silent failures.

2. Add Debug Logging

Early and often. Logging the type property revealed it was undefined.

3. Test Edge Cases

If something works in one context (regular Components) but fails in another (Tile Components), the difference is likely in how they're constructed.

4. Understand Your Base Classes

Knowing how the Component constructor uses the type parameter was essential to finding this bug.

Related Fix: The hitObject Bug

While debugging, I also found another bug in the hitObject function:

// Before (incorrect)
hitObject : function(id, otherid){
    if((id.crashWith(otherid)) && (id.y <= otherid)){
        id.gravitySpeed = -(id.gravitySpeed * id.bounce);
    }
}

// After (correct)
hitObject : function(id, otherid){
    if((id.crashWith(otherid)) && (id.y >= otherid.y - id.height)){
        id.gravitySpeed = -(id.gravitySpeed * id.bounce);
    }
}

The original condition id.y <= otherid only worked for very specific collision cases. The corrected condition id.y >= otherid.y - id.height properly checks if the object is hitting from above, which is essential for platformer games.

Complete Before and After Comparison

Conclusion

One line of code. That's all it took to fix the image tile bug. Just adding com.type as the 6th parameter to super().

But finding that one line required understanding the entire inheritance chain of TCJSGame - how Component creates images, how Tile extends Component, and how TileMap creates Tile instances.

This debugging experience taught me that in game development, the smallest oversights can have the biggest impacts. A missing parameter doesn't crash your game - it just silently breaks features, making bugs much harder to find.

If you're building your own game engine or extending an existing one, always double-check your constructor parameters. That one missing argument might be the reason your images won't show up.

Have you encountered similar bugs in your game development projects? Share your debugging stories in the comments!

Built with TCJSGame – Simple JavaScript Game Development