I've continued experimenting with pixi.js and starting to make an RPG style shoot'em'up.

This time loader for sprites from Aseprite program was used. Found the source code somewhere in internet. I wanted maps to be loaded from Tiled software json format, but for the first time they were loaded from array. Nothing special here. Custom module for player controls was written - a stick like controller.

01-cucu_hero_pixi-first-versions.png

But the main issue was with the PAUSE in game. I wanted to create a screenshot of current canvas state and add some effects to it. In this case I could create a layer above and add a text there. But I could not achieve that.

The only solution I've found was this piece of code:

      spritePause = new PIXI.Sprite(PIXI.Texture.from(app.renderer.view));
      spritePause.width = global.APP_WIDTH;
      spritePause.height = global.APP_HEIGHT;
      //spritePause.filters = [new PIXI.filters.BlurFilter(1)];
      app.stage.addChild(spritePause);

but it works only once. The second time it fires it was not working, previous sprite image was displayed. I was very dissapointed. I don't have a time to look up the documentation and reading a bunch of pixi.js source code.

02-cucu_hero_pixi-last-version.png

And the other issue is loooong preload between scenes when I've needed to remove all sprites from scene and fill up it with the new one. I think it's visible on video.

Another bug was found when too much objects were created on the screen

  constructor() {
    // TODO: here is the bug when killing too much enemies.
    super(window.app.loader.resources.enemyAntSprites.spritesheet);
  }

That was the final stop with pixi renderer.

In other case, the main goal was achieved: splash screens, sounds, levels, simple enemies. It was really fun to develop those things in almost simple way with pixi. But in other case I came to a decision that it was a bit of lack of interest wtiring this stuff with pixi. A month before there was a try from my side to wrote the game with GODOT engine. It was a simple space shooter, but it wasn't so fun. It looks like the other developers made everything for you and all you need is to place the actors on the scene and go on. It's gamedesigner way, not game developer.

03-cucu_hero_rom-render.png

So for as a junior game developer is much interesting to create the things form scratch by myself. And my first goal was to write own renderer with raw HTML5 canvas.

And to learn something new I've decided to choose TypeScript as the main language.

Renderer should be as simple as possible and for the first time I've just rewrite pixi methods and add something from myself.

So I've created a scenes, which can have a bunch of layers with names. On layers we can add sprites. Keep it simple. Basic Sprites, Sprites form Aseprite, TiledMap files loader, TTF font, raster PNG font etc.

04-Tiled-map-example.png
05-Tiled-map-object-types.png

About the Tiled map editod: I dont have time to write my own, but I've started as well. So Tiles is the fast way not only create a map, but even a simple objects in it! That's what I was searching for. So basically i've created  an objects: goal, enemy respawn, next level trigger and collision boxes. Simple solution but a bit hard to handle all those objects values and positoins on a map.

For this moment I' stoped working on this game. I've realised that it needs a lot of time to invest and I'm not ready for. Better try with simple games first!

android
games