Game with AJAX->PHP

[Wizz]

I'm new to game development.

I want to create a game that is decided on the server side with PHP. The graphics will be shown using Canvas and I would hope that some graphics would be used from Illustrator.

I need to know if the pixi.js framework can be used to communicate via AJAX to represent different graphics through user interaction.

Example.

User makes a decision -> values are calculated on the server side -> sent back and represented with graphics.

Is this possible? I took a glimpse at the documentation and searched for AJAX but found nothing.

[mattstyles]

Pixi does one job really well, renders stuff lightning fast!

Ajax is (rightly) beyond its scope but there are many libraries out there that can help making ajax calls to a remote service, if you don't have to support old browsers then fetch is very nice modern api for accessing xhr.

Pixi can then be used to render your scenes and make your graphics respond to changes you get from querying the backing service.

[Wizz]

Thanks for the reply. I checked Fetch and although IE is not supported, I suppose it could still be a solution.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

And yet, if pixi.js doesn't support AJAX, do you know of any other engine that does? I want to create a turn-based game, so the rendering of graphics in a very fast way is not essential to me.

I'll have to check out the other options.

[mattstyles]

I don't, most frameworks/engines don't tend to touch ajax communication with services (some will I'm sure, but its not usually a big concern and there are lots of alternatives that are easy to integrate).

Pixi also has a very good api and speed isn't it's only area of advantage. It abstracts away most of the low-level canvas api to produce higher-level abstractions that are easier to work with (as all of these rendering layers do). One of the biggest advantages of Pixi is top-notch documentation, active developers/contributors and a fantastic and knowledgable community. You'll always hit issues learning and using libraries/modules/frameworks and getting good quality answers quickly is a major pro.

IE usage is terribly small, I'm not sure it's even in active development, hence why many newer things are not supported and probably won't be. Polyfills exist however, in the case of Fetch very good ones. Using XHR to make ajax calls is an old technology, hence why Fetch exists.

There are many other libraries out there for making ajax calls, I can recommend Axios, a very well put together library that has a clean api for making XHR and supports older browsers (as well as working seamlessly on the server/node).

16 hours ago, Wizz said:

User makes a decision -> values are calculated on the server side -> sent back and represented with graphics.

Is this possible? I took a glimpse at the documentation and searched for AJAX but found nothing.

It's pretty easy to set this sort of thing up using Pixi (or any other rendering lib for that matter, they all work pretty similarly):

* Set up your rendering loop to render each frame

* Set up your scenegraph (i.e. add containers, sprites etc) to be rendered each frame (on the render loop tick)

* Make your asynchronous call for data

* On response, change values for items in your scenegraph (i.e. move sprites, change colours etc etc)

* Your rendering loop will hit the next tick and render the scene based on the changes you've just made

In semi-pseudo code it could look something like:

var sprite = new Sprite('big_boss', 10, 10)
var scene = new Scene([sprite])

requestAnimationFrame.on('tick', function render () {
  renderFrame(scene)
})

// Some point in the future
makeRemoteCall(data).on('response', function (newData) {
  sprite.x = newData.x
  sprite.y = newData.y
})