Skip to main content

Which Gaming framework needed when and how to use a rightframework for gaming based on client requirement

Mobile gaming and web Gaming these day's are a big market. so how to choose a right framework here are some point to remember.

situation 1->you need to run your game on web and mobile too but performance is second priority then you should choose either canvas or webgl there are tons of   webgl and canvas framework around there i would talk only which i haven used in my past.

1. Pixijs
   link-http://www.pixijs.com/
example:-https://pixijs.io/examples/#/basics/basic.js

pixijs is a small renderer which uses canvas fallback to run your content on both mobile device and web. so first question comes to your mind what is canvas fallback canvas fallback means its tried to run your content on webgl (which run's really fast on gpu) if there is no webgl support its run's your content on canvas.

Benefit of using Pixi Js.

1. it's really easy to use if you are a flash developer or from a gaming background.

2. it's really fast and tried to run your content at 60fps.

3. container is base display class with empty content. and you can add as many container as you want and its added little or no gpu/cpu overhead.

so add a container like this->

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var container = new PIXI.Container();

app.stage.addChild(container); 

example link:- https://pixijs.io/examples/#/basics/container.js

4. another class is sprite which extended container class sprite class accepts a texture or a img and display visual of stage.

5. pixijs comes with all type of utils such as:-
   1. container class to handle group of sprite.
    2. sprite class to handle display visual using .png .jpg or spritesheets.
    3. spritesheet animation to handle 2d frame based animation. 
    4. fully spine support handle bone based animation.
    5. a fully graphic api to handle all shape creation.
    6. full support for texture package so you can use spritesheet or textureatlas to reduce memory overhead.
    7.rendertexture which can convert a graphic to texture and can be treat as a reusable item.
    8. bitmap font support
    9. filter for effects
    10 . all type of masking
and many more
 check out this:-https://pixijs.io/examples/#/basics/container.js


 Performance Tips

 https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips
    
continued next-> cocos creator js



Comments

Popular posts from this blog

Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop  PixiJS is fast blazing fast and you can get a decent FPS even on older device.   so here is my optimization techniques for PixiJs 1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call. use TexturePacker  https://www.codeandweb.com/texturepacker  best tool when its comes to spritesheet 2. for floating point calculation round off calculation for example let  speed = 0.75 ; let  position = 100 ; console . log ( Math . round ( speed * position )) 3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it. 4. its very important one managing TextureCache in memory you can get all TextureCache list by using  Object.entries(PIXI.utils.TextureCache); so even you use ap...

adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/

adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference path = "node_modules/pixi-particles/ambient.d.ts" /> import 'pixi-particles' code of particle delcare a     global variable   private emitter ?: Emitter ; const img = PIXI . Texture . from ( "./assets/images/particle.png" ); this . emitter = new Emitter ( this ,[ img ],{ "alpha" : { "start" : 0.62 , "end" : 0.39 }, "scale" : { "start" : 0.1 , "end" : 0.9 , "minimumScaleMultiplier" : 1.25 }, "color" : { "start" : "#ffff8f" , "end" : ...