• Content Count

  • Joined

  • Last visited

Everything posted by wijesijp

  1. In my game I can control the animation speed of the "AnimatedSprite" using "animationSpeed" But what is the frame rate of the animation? Suppose we have 2 animations with 20 and 50 frames how many frames get played per second if both have same speed.
  2. I am using tweenjs https://createjs.com/tweenjs I think this is a very popular tween API?
  3. I have following tween I used to move an image in my game coords = { x: 0, y: 0 }; tween = new TWEEN.Tween(coords) .to({ x: 700, y: 200 }, 2000) .onUpdate(function() { cardImg.position.set(coords.x, coords.y); }) .onComplete(function(){ redoTween(); }) .start(); function redoTween() { cardImg.position.set(0, 0); tween._valuesStart = { x: 0, y: 0 }; tween._valuesEnd= { x: 700, y: 0 }; tween.start(); } This works as expected. I wanted to re-use the same tween to move the image to a different location. I would like to update "coords" to new location and; call say; tween.start(); Is there a way to do this? What I noticed was I can only use the it once. https://jsfiddle.net/wijesijp/85xavjrs/30/
  4. I wanted to play multiple animations with a AnimatedSprite. I setup the animated sprite in following manner. this.spriteSheet = this.loader.resources["images/atlus_runner.json"].spritesheet this.anim = new PIXI.extras.AnimatedSprite( this.spriteSheet.animations["walk"] ); this.anim.animationSpeed = 0.2; this.anim.loop = true; this.anim.play(); this.addChild(this.anim); When I wanted to play another animation, I did it in following manner var newAnim = this.spriteSheet.animations["jump"]; this.anim.stop(); this.anim.textures = newAnim; this.anim.play(); I stop the current animation, set the new textures and play animation again. Is this the correct way of playing another animation?
  5. Let's say I have information like this: { animations: [{ name: 'walk', prefix: 'player_walking_', start_frame: 1, end_frame: 12, loop: true }, { name: 'jump', prefix: 'player_jump_', start_frame: 1, end_frame: 5, loop: false } ] } I supply this to a class and it will build up these animations Then I can just call the animation name and it will get played. That is the kinda idea i am having now..
  6. I wanted to create some animations from sprite sheet. I have seen several examples like https://pixijs.io/examples/#/basics/spritesheet.js The functionality seems to be very basic. Is there a way of loading a sprite sheet directly? Is there a way to call a function when the animation is completed in "PIXI.extras.AnimatedSprite" Is there any examples or wrapper class anyone created that I can use as the starting point?
  7. I have a very simple Pixijs project that display a image. There is no animation or anything in it. I wrote simple code to adjust the app size when the user resize the browser window. function resize() { var dis = Math.min(window.innerHeight, window.innerWidth); app.view.width = dis; app.view.height = dis; } window.onresize = function(event) { resize(); }; The problem I have is the canvas get resized, but the content inside it does not redraw. Is there a function in pixi that I can call to redraw or update the canvas?
  8. i add the project to fiddle https://jsfiddle.net/wijesijp/85xavjrs/10/ I remove the image add a rectangle to the code. I expected it to move but it is not moving. There are no errors on the console out also. Can you please advice how to fix this issue? Found what was wrong, i was passing elapsedMS to update function. I should have set the time.
  9. it is declared at the top var position; Then; position = { x: 0, y: 0, rotation: 0 }; tween = new TWEEN.Tween(position) .to({ x: 700, y: 200, rotation: 359 }, 2000) .delay(1000) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate(update);
  10. I tried the library here https://github.com/tweenjs/tween.js/ Is there a better one to use with Pixi? The problem is I am not sure how to use the library within pixi. I noticed the my "update" function does not get a call. Also the position variable does not get updated.
  11. I am new to Pixi development. I am trying to tween a image. But it does not seems to work. The image is getting loaded and there are no errors. But the card image does not move. Can anyone point out what I am doing wrong? var app = new PIXI.Application({ width: 1024, height: 800, antialias: true, backgroundColor: 0xced6e2 }); var cardImg; var gameScene; var position; var tween; document.body.appendChild(app.view); function setup() { cardImg = new PIXI.Sprite( PIXI.loader.resources["images/Hearts_Q.png"].texture ); cardImg.scale.set(0.5); gameScene.addChild(cardImg); position = { x: 0, y: 0, rotation: 0 }; tween = new TWEEN.Tween(position) .to({ x: 700, y: 200, rotation: 359 }, 2000) .delay(1000) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate(update); tween.start(); app.ticker.add(dt => gameLoop(dt)); } function init() { gameScene = new PIXI.Container(); app.stage.addChild(gameScene); PIXI.loader.add("images/Hearts_Q.png").load(setup); } function gameLoop() { var dt = app.ticker.elapsedMS / 1000; var result = TWEEN.update(app.ticker.elapsedMS); } function update() { cardImg.position.set(position.x, position.y); } init();
  12. Is there a ttf font loader in pixi?
  13. I am new to pixijs development. I am trying display some text using Font.js var font = new Font(); font.onload = function() { var title = new PIXI.Text("This is a test", { fontFamily: "48px A.C.M.E. Secret Agent" }); title.position.set(100, 100); gameScene.addChild(title); }; font.onerror = function(err) { console.log("font error " + err); }; font.fontFamily = "A.C.M.E. Secret Agent"; font.src = "fonts/acmesa.ttf"; But I am getting a warning Failed to decode downloaded font: data:application/x-font- OTS parsing error: post: Failed to parse table And the text is not getting displayed with the correct ttf font. Can someone post a simple example showing how to use pixijs with Font.js?
  14. I have seen several post related to this. Will this get added soon? Really like to use it in my project. Is there a place we can up vote or request features?
  15. I hope you will add it soon. It is really useful feature to have.
  16. Your card game is exactly what I wanted to do. I don't suppose full 3d will get added soon right? But can you get a perspective view like you had in the card game with current Pixi engine?
  17. Hi all, I am planing to build online black jack game. I wanted to create a perspective view environment for this game. I wanted to add animations like flipping cards, squeezing cads, dealing etc. I am looking for a game engine for this. I have not used Pixi JS before. But I do have experience with Cocos Creator. May I know whether something like this be done with Pixi JS? If it is possible can someone point to area I should be check? Greatly appreciate any help you can provide.