Is it worth adding pixi.js to my skills

[TheCrock]

I am a real newbie. 

I just finished the excellent book Foundation Game Design with HTML5 and Javascript by Rex Van Der Spuy.

The book has taught me a lot about making game maps from 2d arrays, collision detection, enemy AI for platform and maze games based on arrays.All of the AI is based on positions generated from 2d arrays.

I can keep track of everything by the positions of sprites in rows and columns of a 2d array.This makes enemy AI easy.

I have a scripts for collisions for rectangles, circles, boxes, that give me collision sides and objects can bounce from them. Also  to act as platforms and so on. 

I would render the game by looping through an array and converting positions in the array to x and y coordinates on the screen.This is all using the html5 Canvas.

I started his follow up book Learn Pixi.js and I am not sure if it is the right direction for me.

My question is can I use all of this stuff I have learned and combine it with the Pixijs?

 

To me it seems like I have spent a lot of time learning tile based games just to go in a completely different and in my opinion less satisfactory direction.The game that I would make by the end of the Pixi.js  book would be simpler than the one i already made.It just looks nicer. It uses a single image for the background and uses arrays only to get the images from the texture atlas.

All i really want is to add 'the juice' from pixi.js. Like animated walking characters and some particle effects.

Can any of you guys give me some advice.

Thanks in advance

Keith

 

Edited November 28, 2020 by TheCrock

[ivan.popelyshev]

PixiJS is one of renderers that has several good plugins integrating it with bigger stuff.

> I would render the game by looping through an array and converting positions in the array to x and y coordinates on the screen.This is all using the html5 Canvas.

yeah, that's the case. 

. First, you have to move to declarative approach. Because pixi has to cache some things, its not possible to just ask pixi to render your collection of elements every frame, you have to make a pixi scene and copy data there. 

Depending on your architecture, its either easy either difficult to add pixijs. For something ECS-like , like here: https://codesandbox.io/s/xenodochial-mirzakhani-yql4n , its easy to do. You just rewrite your Visual system that manages stage tree and textures.

> Like animated walking characters

that's spine

> and some particle effects.

that's one of particle libs, like pixi-particles

> To me it seems like I have spent a lot of time learning tile based games just to go in a completely different and in my opinion less satisfactory direction.

the problem is that tiles are entirely different talk. There were many tile-related talks on this forum. That topic is HARD, and people who do tutorials for newbies cant just approach it  

The engine you are doing for your game is still yours. Optimizations for tiles on high-level are still yours. PixiJS can help you only on low-level, the thing that we, PixiJS team, developed for 8 years. If you want to learn how to do it from scratch - that's fine, but at least use PixiJS code as reference.

[TheCrock]

Hi and thank you for your reply.

I don't understand what you mean  here . I apologise I don't mean to sound rude.

Do you mean I cannot take a beginner book and apply the tile based approach to pixi.js?

Do you think I should build my game using different methods?

I spent a lot of time learning how to create platforms and mazes from 2d arrays.All of the logic I learned relies on moving around the columns and rows of the 2d array. It is used for pathfinding, enemy ai, everything. Have I wasted my time?

 I need to move and get something made now.

Is using 2d arrays and canvas not a good way to build a platform game?

My render function would look like this 

//Display the sprites
if(sprites.length !== 0)
{
for(var i = 0; i < sprites.length; i++)
{
var sprite = sprites;
if(sprite.visible)
{
drawingSurface.drawImage
(
image,
sprite.sourceX, sprite.sourceY,
sprite.sourceWidth, sprite.sourceHeight,

Math.floor(sprite.x), Math.floor(sprite.y),
sprite.width, sprite.height
);
}
}

All of my sprites are held in an array for rendering .. I can also check for collisions by looping through the array an comparing positrons of other objects.

. Is this going to be hard to convert to pixi?

 

Thank you for your interest.

 

 

Edited November 28, 2020 by TheCrock
spelling

[ivan.popelyshev]

> Do you mean I cannot take a beginner book and apply the tile based approach to pixi.js?

No, what I mean you'll get after reading this forum topics about tilemaps  You really want me to explain you tilemaps in one post when I already told you that  huge tilemaps are hard? They are hard. Whether its canvas2d, webgl, pixijs, phaser or whatever. You just scrubbed it only a bit. Basically, i want to say "man, there is a complete clusterfuck ahead, get ready".

It should not be hard to convert basic approach to pixi. First you have to throw out "I tell pixi what to draw every frame" approach. Its not because approach is faulty, its because it stops working as soon as you start work with Text and some other elements.

You have to put graphics data to pixi objects. Somehow. Sprites, Graphics, pixi-tilemap, whatever. PixiJS will render every frame based on that info. Here's extra article for people who really want to make THEIR engine: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop , and I already gave you link to example of architecture of custom engine using pixi.

> I apologise I don't mean to sound rude.

English is not my native language. I may sound rude too.

[ivan.popelyshev]

Here's another example from my not-finished-yet tutorial https://github.com/ivanpopelyshev/pixi-starfighter/tree/master/lesson1_5-tilemap , there's small tilemap based on PIXI.Graphics on low-level, window approach in high level.

[TheCrock]

Ok thank you very much. 

So i will use pixi.js to build my sprites without 2d.arrays. . I will do it with texture atlas and json file. I already know how to do this.

What about collision detection?

If I have monsters pushed into an array can I use a for loop to check for collision with a player character like this maybe:

  for(var i = 0; i < hedgehogs.length; i++)
  {
    var hedgehog = hedgehogs;

    if(hedgehog.visible && hitTestCircle(cat, hedgehog)
    && hedgehog.state === hedgehog.NORMAL)
    {
      if(cat.vy > 0)
      {
        blockCircle(cat, hedgehog, true);
        hedgehogsSquashed++;
        squashHedgehog(hedgehog);
      }
      else
      {
        gameState = OVER;
      }
    }
  }

I know the syntax would be slightly different but is this type of thing ok using pixie.js?

I am very gratefull for your help Ivan

[ivan.popelyshev]

pixijs doesnt have collisions. I can tell you how its in general case, if you are writing your engine: 

you should put all physics in function in separate file. In case you use physics lib, this file will exist anyway  Here another example for you: https://codesandbox.io/s/app-architecture-3-j0di5 , see the entity logic , visual logic and phys logic are separated.

Its ok to store x,y,rotation and stuff in your own Entity, and copy to/from pixi and physics.

Edited November 28, 2020 by ivan.popelyshev

[ivan.popelyshev]

I suggest that you look repos i mentioned, and try run those apps, it'll save you big amount of hours when you make your own stuff. 

Just in case you think I hate canvas2d, here is my old pure-js tilemap: https://github.com/ivanpopelyshev/bombermine-shuffle . Its not the real thing i used in production back than, but its close.

[TheCrock]

Thank you Ivan for all of your help and interest.

I don't care about writing my own engine, I just need to start producing something. I want to  mainly create a 2d platform game to begin with. I already know how to do all of this in plain javascript but I want to be able to put some more professional touches to the work and using a game engine  or libraries seems to be the way to get things done quickly.Like animating a walk cycle.

I have a simple collision library called bump by kittycat attack.He is also the author of the pixi.js.book I am studying.  It is  for use with pixi. It is more or less the same code I was using before.

 I spent a couple of hours in pixi.js and already have sprites on the screen  using a texture packer and json files to tell pixie what the sprites are. So i know pixi.js can get things done fast. I will carry on and see what I can get done.  I was thinking though that as I am not writing my own engine that perhaps Phaser would be even quicker. It has level editor now.

Your examples are very nice, you must  be quite an experienced programmer.

I want to start doing now. I have learned a lot from building array based games. So I know my work is not wasted. its a little disappointing that a lot of the logic i learned is not going to be very useful for pixi.js games though.

 

Thank you for your help Ivan. 

[Milton]

I think you're taking too big a leap :)

Maybe go with Phaser first, check out Emanuele Feronato's tutorials.

[Nico Ray]

On 11/28/2020 at 2:26 PM, ivan.popelyshev said:

Here's another example from my not-finished-yet tutorial https://github.com/ivanpopelyshev/pixi-starfighter/tree/master/lesson1_5-tilemap , there's small tilemap based on PIXI.Graphics on low-level, window approach in high level.

Thank you for sharing your book!