Search the Community

Showing results for tags 'pixi'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 278 results

  1. Its down for almost a month or something like that. No updates, no news, nothing :/
  2. I use this code to setup a texture atlas animation: PIXI.loader .add('out2', 'assets/out2.png') .load(function (loader, resources){ onRotationsLoaded(loader, resources) }); function onRotationsLoaded(loader, resources) { first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture)); app.renderer.plugins.prepare.upload(first, function(){ console.log("loaded first"); // ready to go }); } function setupFrames(name) { var frames = []; array is an array that stores correct position for each frame of animation for (var i = 0; i < array.length; i++) { var rect = new PIXI.Rectangle(array[i].frame.x, array[i].frame.y, array[i].frame.w, array[i].frame.h); frames.push(new PIXI.Texture(name, rect)); } return frames; } I would like to change the texture of the AnimatedSprite first in a click event or something. The new texture needs to be fetched from the server(I do not want to load it at start, because there are too many of them). I could destroy first and create second AnimatedSprite, but is there a way to just change it's texture atlas image?
  3. Hey guys! I'm starting a new project and I think this is the best place I can find some help. The way the story progresses in this upcoming project is very akin to an interactive graphic novel. I was wondering, would Pixi be the way to go? I see in one of their showcases they do in fact have a graphic novel in there, but I'm absolutely lost about how to start creating something like that. As far as I can understand, Pixi doesn't have global variables, right? So for example if the reader makes a choice in Chapter 1, is it possible to call that variable in Chapter 2? I'm exploring Pixi because it's a project focusing on mobile devices first, desktop browsers second. For app creation, I'm looking at Cordova/Crosswalk. Anyone who could point me in the right direction? Any advice is greatly appreciated!
  4. Hello visitor! I'm looking for skilled javascript developer to build small web game for 2 weeks with me. My main goal to get know more about pixi.js by doing valuable project for estimated time. What you will get at the end of development? You can share game with others, it will be your own portfolio; You can stay with me for next 2 weeks to monetize the game to get revenue from advertising. I will share 50% with you; If you not familiar with pixi.js, you will get experience by doing real project and you will spend only 2 weeks to get results; You will meet good guy (me :)), we can collaborate to do next projects which will give you money. Who am I? My name is Andy Tyurin. I'm working in banking sphere in a role of front-end team leader. I spend my free time by working with my own 2.5D game engine which is written on Dart. I'd like to build games, but I haven't got any real games to show, which can be described as a problem for me, but I did a lot of examples build on top of three.js, lwjgl (java). Except the fact, that I'm Dart enthysiast, I'd like to work with other languages such as javascript, node.js and java. Which tech stack I want to use by doing this game? Pixi.js as rendering engine to build 2D game; KOA framework to build REST, websocket server (node.js); React to make UI components. What about project, any other information? The game is called as "Space football". I will glad to tell you more, please contact first by skype: AndyTyurin Kind regards!
  5. Solved thank
  6. Hey there! Catacomb Chaos is an endless action arcade game where you try to survive against unrelenting waves of skeletons. You can loot gold and purchase potions for your next life. Let me know what you think! Play here: I learned some neat stuff making this. Engine design, ECS, and steering behaviors are some of the cooler things I experimented with for the making of this game.
  7. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(;
  8. So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?
  9. Hi, this is my first post I'm trying to use an image (png) as a container mask, it seems to work well on macOS but on Windows 8.1/10 ( ie11, edge, firefox 53) mask has no effect. Here is the simple code var app = new PIXI.Application(window.innerWidth,window.innerHeight); document.body.appendChild(app.view); var baseContainer = new PIXI.Container(); app.stage.addChild(baseContainer); var theMask = PIXI.Sprite.fromImage('mask.png'); var baseImg = new PIXI.Sprite.fromImage('base.jpg'); baseContainer.addChild(baseImg); baseContainer.addChild(theMask); baseContainer.mask = theMask; I'm using PIXI 4.4.1 Any idea why this is not working? Thank you
  10. Hello, How do I make my canvas look the same on all devices? function PixiPlay(){ var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false}); document.body.appendChild(renderer.view); var root = new PIXI.Container(); I saw a tutorial talking about Pixiv4. But he talks almost nothing about the canvas Can anyone teach me how to do this, in a simple way, please?
  11. Hello everyone, First time using Phaser, and I'm trying to add a tileSprite to the game using a texture generated by Pixi. But I'm getting the following warnings and errors: Warning - Phaser.Cache.getImage: Key "__default" not found in Cache. Warning - phaser.min.js:3 Phaser.Cache.getImage: Key "__missing" not found in Cache. Error - phaser.min.js:3 Uncaught TypeError: Cannot read property 'base' of null at new c.TileSprite I discovered that the error disappears when I add a preload method, load any image, even an image that does not exist. By doing this, the tile appears normally and the erros desappears. Can anyone tell me what's going on? I need to use textures already loaded outside the Phaser. My Code(.coffee) @_game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, @element, preload: @_preload create: @_onPhaserCreate update: @_onPhaserUpdate render: @_onPhaserRender) _preload:()=> @_game.load.image('load-nothing', ''); _onPhaserCreate:()=> @_game.physics.startSystem(Phaser.Physics.ARCADE); @_background = new PIXI.Texture(new PIXI.BaseTexture("image_element")) @_stars = @_game.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, @_background) _onPhaserUpdate:()=> # _onPhaserRender:()=> #
  12. Crash and close Cocoon app, when use PIXI TEXT witn WebGL Render, for Pixi version 4.3 or superior.
  13. I try to use `containsPoint`, but it always return false. It seems `containsPoint` must work with `startFill & endFill`, but when I use `bezierCurveTo` draw line, the fill not working. But the canvas original function `isPointInPath` is working. Why? Here is my demo:
  14. Hi When i load my textures with the loader and add this to the stage it's not showing. But when i create a texture with PIXI.Texture then works perfectly. I load in the game.js file the main-scene.js, in the main-scene.js i add some sprites when i create the texture in the mainscene it works fine but when i use the resources from the loader i get no error but the sprite is not displayed. What i'm doing wrong? Thank you game.js import * as Pixi from 'pixi.js' import MainScene from './scenes/main-scene/main-scene' export default class Game extends Pixi.Application { constructor (vueContext, config) { super() // Contexts this.vue = vueContext this.config = config // Add Game view to site this.vue.$el.appendChild(this.view) // Scenes this.scenes = {} // Main Scene this.scenes.mainScene = new MainScene(this, this.vue, this.config) this.stage.addChild(this.scenes.mainScene) this.load() } load () { this.loader.add('sprite2', '/static/game/images/sprite2.png') this.loader.load(this.setup()) } setup () { // Setup Scenes this.scenes.mainScene.setup(this.loader.resources) } run () { } destroy () { } } main-scene.js import * as Pixi from 'pixi.js' import Scene from './../../engine/scene' export default class MainScene extends Scene { constructor (context, vueContext, config) { super() // Set Contexts = context this.vue = vueContext this.config = config } setup (resources) { // This is wokring let Texture = Pixi.Texture.fromImage('/static/game/images/sprite1.png') let sprite1 = new Pixi.Sprite(Texture) this.addChild(sprite1) // This is not working let sprite2 = new Pixi.Sprite(resources.sprite2.texture) this.addChild(sprite2) } }
  15. I am trying to load texture atlas dynamically. The load happens when the user clicks on canvas. At the same time an animation fires. The next time the user clicks on canvas, previously loaded animation runs. Perhaps it is best to demonstrate the problem. I uploaded the files on a test server. You can see the delay here: I hardcoded the first animation load, meaning that you will see a delay on second canvas click. Run this code on a low end mobile device, and you will se a huge delay. I am getting a 4s delay on a motorola G and 0.5s on an iphone 5. What can I do solve this annoying issue? you can inspect the code on a website, but I will also paste it here: $(function(){ var current; var next; var canRunNext = false; var isAnimating = false; var firstRun = true; var container = document.getElementById("canvas-container"); var app = new PIXI.Application(550,584,{transparent:true}); var canvas = container.appendChild(app.view); setupCanvas(); loadRotationsAndCurrent(); var infiniteLoader = PIXI.loader; function setupCanvas(){ $(canvas).attr("id","canvas"); if (window.screen.width < 600){ $(canvas).css("width","100%"); $(canvas).css("height","100%"); $("#canvas-container").css("width","100%"); }else{ $("#canvas-container").css("width","50%"); } } function loadRotationsAndCurrent(){ PIXI.loader .add(['jimages/1s.png.json']) // load all rotations .load(onRotationsLoaded); } function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); next.visible=false; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); next.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(next); // app.renderer.bindTexture(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); canRunNext=true; console.log("next loaded"); }); } } function setupFrames(name){ var frames = []; for (var i = 0; i < 30; i++) { var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame(name + val + '.png')); } return frames; } function onRotationsLoaded(){ // all rotations loaded current = new PIXI.extras.AnimatedSprite(setupFrames("1_000")); current.x = app.renderer.width / 2; current.y = app.renderer.height / 2; current.anchor.set(0.5); current.loop=false; current.animationSpeed = 0.5; current.visible = true; isAnimating = false; current.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(current); } var run = true; $("#canvas").on("click touch touchstart",function(){ if (firstRun && !isAnimating){ loadNext(); isAnimating=true; current.gotoAndPlay(0); console.log("first run"); firstRun=false; }else{ if (canRunNext && !isAnimating){ isAnimating=true; next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); });
  16. I have this simple jsfiddle that displays the problem that I'm trying to solve. It looks like the render texture get's cropped based on the position of the object passed to the renderTexture.render function. Is there a way around this?
  17. Hi, I'm running into an issue regarding collision detection against adjacent DisplayObjects. Let's say I have sibling objects that are a child of a Container that has been rotated. If I use getBounds() on the siblings they return a bounding box that is oriented to cardinal north. Using those bounds for collision detection may result in false positives, because the given bounds may not follow the actual shape and orientation of the DisplayObject. I created a codepen to illustrate the point: When you toggle the "rotate" buttons at the bottom of the pen you will see the purple box morphing to the shape of the bounds for "shape" and "label". The text will change from red to green if the collision detection returns positive. I would like to do a more robust collision detection algorithm (possibly based on Separating Axis Theorem), but I would need to grab the vertices for each shape correctly translated to the global coordinates regardless of their nesting within the scene graph (accounting for scale, rotation, and translation from the shape and all parent transforms). The case being that the collision detection that I would like to do may not be only between direct siblings within the scene graph. Is there a nested property that would give me what I'm looking for, or will I need to grab the graphics data and apply all of the recursive parent transforms myself for each vertex? Here is a fork of a codepen that demonstrates the Separating Axis Theorem:
  18. Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile Any advise, can this be done? any tutorials available? lack of experience in this means i'm struggling to break it down into smaller tasks, any advice. Thanks
  19. Hi I'm creating a animated banner using pixi for a website. Then banner will be 100% width and 100% viewport height. I have set the size of the renderer to window.innerwidth and window.innerHeight. Now when i add my animation image with mesh texture and shading, what is the best way to center it within renderer? Hopefully if the answer i get is based on percentages this shoudl also make it repsonsive. Thanks
  20. var name_text = new PIXI.Text(name); = "bold 10px arial"; = "center"; this.imageContainer.addChild(name_text); How do I change the color ! aaa
  21. Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  22. Hi, I have a question about the resolution in PIXI.js: If I create a PIXI.Graphic object (for example a rectangle) with the size 50 pixels by 50 pixels, this rectangle will be the same size on my desktop machine (devicePixelRatio 1) as a 50 pixel by 50 pixel div element. When I look at the same page with an iPad Air 2 (devicePixelRatio 2), the rectangle drawn with PIXI is twice the size of the div element. In my opinion, on the iPad, both elements should be equally large, right? I have created a CodePen: Thanks for your support!
  23. Sometines I have TypeError: Failed to execute 'attachShader' on 'WebGLRenderingContext': parameter 2 is not of type 'WebGLShader' in pixi.js: 3936 (Ver 4.0.0). This appears few times in a week and I have no idea when and why. Same things can 100 times work and once not. Why this error appears at all and how can I fix or prevent this?
  24. Hi everyone! I have several Pixi.Text objects floating in my Pixi container. var style = { font:"22px Verdana", fill:getRandomColor() }; var text = new PIXI.Text("My text", style); text.anchor.set(0.5, 0.5); text.dx = 0.1; text.dy = 0.1; Each Text object is rotating from -90 degrees to + 90 degrees. When collision happens with Text object and container, Text acts like a ping-pong ball changing its direction. Currently I'm using this code to check if text object is < or > of my pixi container width: if(text.x < 0 || text.x > $("#pixi-container").width()) text.dx = -text.dx; if(text.y < 0 || text.y > $("#pixi-container").height()) text.dy = -text.dy; text.x += text.dx; text.y += text.dy; Collision happens when a center of text object reaches container border. I need collision detection when ends of text object touches the container border.
  25. Hello guys, I need you help. Do you know how to do a ribbon animation on PIXI.js? B I saw a lot of example on CSS3, but no example on pixi. Maybe I search in a wrong way. But I need 2D version, not a 3D Thank you for any feedback