Is PixiJS enough or do I need another library?

[vihanagarwal]

I am a student currently working on a simple Picture Reveal Game. The way it works is this: A picture is hidden behind a grid of squares. Each time you click on a square a trivia question pops up and if you answer it correctly part of that picture is revealed, if not, you lose points. The aim is to guess the picture. We will use an online API for the questions. That being said here are my concerns:

I understand PixiJS is only a rendered with capabilities of taking input. Will pixiJS be sufficient for the game I am planning to build? I will need some sort of database that holds a collection of images (as I do not want to use Flickr API), and will also need to keep a track of the state of the game. Will PixiJS and regular JS be enough for this task? Or do I need another library as well?

 

[mattstyles]

Depends entirely on how much you want to code yourself, as you noted, Pixi handles rendering (and also some user input management).

You don't need a database on images, just store them somewhere and request them, no need to attempt to stuff them into a database.

Pixi does not handle state or data management so you'll either need to code that yourself or find a library to help you, something like Phaser builds atop Pixi to add stuff like state managament, audio stuff (I think), richer user input (keyboard, gamepad etc) and some other stuff. If part of your assignment is to learn this stuff though then its worth coding up state management yourself, using a finite state machine should be easy enough to learn and implement. To be honest it doesn't sound like you need Pixi either, you're just manipulating elements and images, which the DOM is more than capable of handling, but, thats up to you (I'm just not sure what advantages Pixi gives you in your case and it adds another abstraction to learn and manage).

You might also want to use a library to manage your data requests, there are several out there, although if you're only targeting modern browsers then the fetch api is really good so I'd suggest using that (there are polyfills available for older browsers but they can be a little hit and miss, if you're really worried about older browsers then something like axios or superagent might be better, like I say, there are hundreds of the things).

I'd also suggest implementing some sort of pub/sub or observer pattern too to decouple your application a little, this is a great and simple pattern to learn (you probably know it already) that will serve you well. By using pub/sub you can fire events that certain parts of your application listen to i.e. click a button, fire a 'request' event, fire an ajax/fetch request for data, on ajax/fetch success, fire a 'new question' event with the data from the request, something listening then displays the question, when the user clicks to answer the question you fire another event with the answer, something listening checks the answer and, if correct, fires another event, the image stuff listens and reveals a new square, or, if incorrect, fire an event, something listening reduces your points. Might be useful for you.

Good luck