Search the Community

Showing results for tags 'pixijs'.

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 116 results

  1. I want to draw a roulette wheel, with 8 sectors, using the arc primitives. For each sector one arc is drawn in a clockwise direction, then one other in anticlockwise direction. Code snippet: const arcAngle = Math.PI/4 const graphics = new PIXI.Graphics() graphics.lineStyle(2, 0xffd900, 1) for (let i = 0; i < 8; i++) { let angle = startAngle + i * arcAngle graphics.beginFill() // arc 1 graphics.arc(250, 250, outsideRadius, angle, angle + arcAngle, false) // arc 2 graphics.arc(250, 250, insideRadius, angle + arcAngle, angle, true) graphics.endFill() } This does not work though, because at each iteration the last point of arc 2 is connected to the first of arc 1 creating a slanted line which should not be there. How can i solve it cleanly? Would it be better to create a Graphics object for each roulette sector and then translate, rotate and put them in a container assembling the whole roulette?
  2. I have the specific requirement of using a Sprite to provide a mask for an entire tile-less terrain. So it can't be segmented into smaller pieces - container.mask will only accept 1 sprite as its mask. So what I'm doing is a 4096x2048 texture sprite with a sprite.scale = 8. Only a small part of the sprite is shown on the screen because with that scale it is massive. From what I understand, PIXI is creating a 32768x16384 quad behind the scenes and using the sprite as its texture. Performance is surprisingly pretty good I'm guessing because WebGL is smart about not drawing off-screen texels. But some overhead is bound to be there. So I'd like to have a screen sized sprite and instead change the UV coordinates of the texture on the fly in order to control what is shown. It also has to work as a mask. Is there a way to do that in PIXI? Edit: This is WebGL only. I have no interest in canvas.
  3. Anyone know the correct way to get plugins like pixi-spine into Angular 2 or Ionic 2? import * as PIXI from 'pixi.js'; works for getting the base pixi library in. But, how do you do something like import * as PIXI from 'pixi.js' and 'pixi-spine';
  4. Hi Everyone, Career Cruising is looking for a Senior HTML5 Game Developer in Toronto. The full job description is here A bit about us and the role. We're not a startup, we've been running a SaaS business for over 20 years, since before SaaS was a thing Our clients are schools, K-12, and we also serve government and library clients throughout North and South America. In this role we're not just looking for a coder, but someone who wants to be part of the full product development process of building the next version of our K-5 products. Thanks!
  5. Hi I was wondering if there's a way in Pixi to map a texture to a graphics object. I would like to some warping on and distortion to images but the only way I can see this happening if I can map a texture to the graphics object. Thanks
  6. 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) } }
  7. 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:
  8. 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.
  9. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  10. So i am trying to orbit a small sphere around a bigger sphere like so: var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= Gball.x*1.3; orbit.position.y = Gball.y/3; orbit.scale.set(0.15, 0.15); Gball.addChild(orbit); animate(); function animate() { requestAnimationFrame(animate); // just for fun, let's rotate mr Honeypot a little Gball.rotation -= 0.05; // render the container renderer.render(stage); } now the only problem is that when i click on the button to remove the child, but want him to keep the position he had in the animation: var ballX = orbit.x; var ballY = orbit.y; document.getElementById("bot").addEventListener("click", function () { var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= ballX; orbit.position.y = ballY; orbit.scale.set(0.15, 0.15); Gball.removeChild(orbit); return false; }); does anyone know how i might be able to do that?
  11. 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?
  12. I'm learning Pixi.js with the goal of creating a game with a lot of UI complexity (imagine something like FreeCiv). I'm starting with small projects and trying to learn good fundamentals. However, I'm struggling to handle interactions in an elegant and flexible way. (cc @PixelPicoSean) I'm creating a Checkers game. Something like this: Here is the basic setup: var gameState = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2]; // Create some textures var boardTexture = PIXI.Texture.fromImage(/*...*/); var pieceSprites = new PIXI.Texture.fromImage(/*...*/); /*...*/ // Create and append our renderer /*...*/ // Create the scene graph var stage = new PIXI.Container(); var board = new PIXI.Sprite(boardTexture); stage.addChild(board); // Add some pieces var pieces = new PIXI.Container(); gameState.forEach(square => { /*...*/ var piece = new PIXI.Sprite(/*...*/); piece.interactive = true; board.pieces(piece); }); stage.addChild(pieces); // Render with requestAnimationFrame /*...*/ So far, so good! Now, I'd like for each of the 24 pieces to be draggable by the user. No problem: dragging is just a function of user events. But here's where I stumble. I could attach callbacks to each of the piece Sprites (this seems to be the idiomatic Pixi.js way). However, my instinct is want to listen to the pieces Container instead. In the DOM Event world, events firing on a piece would bubble up to pieces, and the resulting would point to a piece. In short: Is there any way to emulate "event delegation" here? EDIT: The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.
  13. Yatzy Solitaire - An HTML5 game by Hello, Yatzy is a classic and incredibly addictive dice game. Its features: - You can play it on every device: desktop or laptop, mobile or tablet, even on your Smart TV. - You can play as guest or as a registered user. - Daily, monthly and all time global rankings. - Free to play. As a HTML5 games developer, you might believe that it is an easy to develop game, but it takes advantage of the Websocket API, so that the game logic is executed on server side. We would like you to give us feed back on the game. Thank you very much.
  14. I'm new to pixijs, but what I've seen so far is very impressive. Great design of the API, naming of functions, variables, documentation, etc. Great performance. Congrats to the people behind it. I use my own sprite classes. Is there a way to bypass that part of pixijs? Optimally I just want to do a series of drawImage calls, where I pass a texture, frame rectangle (texture clipping), and transformation matrix, and its painted to the canvas in the order called. Very much like immediate mode rendering, instead of the pixijs scene graph which is more like retained mode rendering. Is there any example of this you can point me to? Or is the scene graph part of the optimization that makes pixijs high performance, so it would be worthwhile for me to rewrite my code to use pixijs' sprite classes? Regards, Bjorn
  15. Hi guys, i've bring this example with Pixijs and i've done a test. I put the canvas inside a div (#content), this div has transform: perspective(900px) and rotate(20deg). The hit area is not ok, 'cause has the old coordinates without calculate perspective. (see attachment) So, how can i get the new coords to pass to hitarea ? Thanks
  16. Ship wrecked Creatures! Save them all and collect as many stars! 250 exciting levels beautiful graphics 5 difficulty levels It works on all devices running IOS and Android fun music and voice creatures Many hours of gameplay For licensing to write to the email: [email protected]
  17. Greetings I'm new to Pixi and I was under the impression that ios 8-9 can play inline video with webgl render texture. However everything works in desktop but in ios it still opens up native fullscreen video player. Is there any css styles or settings I'm missing? Thanks
  18. Hello! My name is Dylan Jones, I work for a studio and we're looking for some contract help as our other developers are busy. We've created games like Battle Group in the past, and are working on a new multiplayer game. We currently have a contractor you might be working with, paid rates depend on speed and quality of work. Let me know if you or someone you know would be a good fit, server knowledge (currently using client authoritative firebase) is a must as we look at resumes (any work on .io genre games is a plus). I can provide more details on the code base (it's a working prototype with mostly clean states) but can not post it. You'll be working with talented folks, like Col Price, out artist for the game seen below: You can contact me on this thread or with Dylan-@-the-Dylan-Jones-.-com if you remove the dashes.
  19. Hello there! Please see our posting for this job over at: It's also below: Our game development studio is looking for a client side (minor server work) javascript PixiJS game developer. Past tiles upon request, but we have many AAA game developers and talent for our next multiplayer game. Our server infrastructure was built by a past full stack engineer hire from UpWork and forums along with our core team, you will work with them and our original team on bringing a version of our .io to the web market. We use Trello and Skype and expect checkins a few times week. We are a small studio with limited budget, but we respect our employees. We have a monthly budget in mind, but would like to hear from you. Our goal is to take what's currently there (shown upon request) and add the fun client side details of polished graphics with some server experience preferred to plug into for minimaps, etc. ALL ASSETS INCLUDED FOR DEV. What we want from you:- Examples of past PixiJS work or similar- Game examples you've worked on and what specifically you contributed (sci fi or .io is a plus!)- UI implantation in PixiJS (we will give you psd, can you bring them in game well, etc)- Mention 'blue bunny' in the early part of your message to show you read this- Mainly client side asks like graphics, explosions, UI, etc- Any references We've hired folks from Upwork before, we please don't waste our time and jump right into it if you think you're good fit! We look forward to hearing from you! More details, like Trello board, the game progress and anything else you would like upon request. We have a goal to hit before the end of the month and GDC. Thanks so much, hope you say hello! Please get in touch with me either on twitter (@TDJ) or email and ignore the dashes: d-y-la-n-@-t-he-dy-lan-jo-nes-.-co-m Thanks so much for reaching out, good luck either way!
  20. Hi all, Check out my web game "Move the Crates". Developed using pixi.js. Game play is similar to "Sokoban". Game is also optimized to work with gamepad. You can play the game here, Some screenshots: Here is the video of the game working in XBOX One browser,
  21. Hi! I'm using pixi.js to distort a sprite by manipulating it's vertexData (Like Photoshop's perspective transform). It's working! But I'm using a canvas texture as source, and as soon as I render the scene after updating the texture, the vertexData resets itself! I need to update the canvas because I'm rendering some animation on it. Some of the code I'm using: this.image = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas)); function render() { var self = this; this.image.texture.update(); //Everything works fine if I comment this line for (var i = 0; i < this.handlers.length; ++i) { //The handlers are some other sprites I'm using as control points this.image.vertexData[i * 2] = this.handlers[i].position.x; this.image.vertexData[(i * 2) + 1] = this.handlers[i].position.y; } this.renderer.render(this.stage); requestAnimationFrame(render); } render(); It there any way to prevent the vertexData to reset? Or is there a better way to achieve the same effect? Thank you so much!
  22. Hi everyone, I'm extremely excited to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter. Here are two demos of exported animations: How it works: The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation. Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object. MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods. After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element. A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library). The files can than be loaded and added to the aape.Timeline object. It's prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list. The exporter currently doesn't parse vector graphics. The tool is not yet finished. I'm still working on the Animate user interface and export options as well as a proper documentation. I also haven't decided how I'm going to publish aape yet. What du you think? Is this workflow still relevant to you? I'd love to get your feedback. Cheers, David
  23. I can't for the life of me figure out how to work with enemy sprites that I've pooled into an array. I add them into the array by using .push() and take them out using .shift(), but once they're out and added to the stage, I have no way of selecting them, working with them, or giving them movement behaviors. Does anyone know how I can work with pooled sprites like this? Thanks.
  24. When I do a requestAnimationFrame it loops through once then it loses its scope. At the moment i don't want to use the arrow function because IE 11 doesn't support it (ref Does anyone know a way around this. Here is a sample code (function(){ var main =function(){ this.init(); } var p = main.prototype; p.init = function(){ this.stage = new PIXI.Container(); this.renderer = new PIXI.autoDetectRenderer(1024,768,{id:"stage"}); document.body.appendChild(this.renderer.view); this.updateStage(); } p.updateStage= function(){ requestAnimationFrame(this.updateStage); this.renderer.render(this.stage); } }()) As soon as it tries to render it calls this.renderer becomes undefined. I have tried binding the requestAnimationFrame which didn't work. So i console.log it out. the first time it logs i get main property with the correct property such as main.stage, main.renderer. The second time it returns me Window (in chrome). I am wondering if anyone knows how to keep the scope.
  25. Hi, For my website i created a neon effect with PixiJS v4 and i'm not happy with the results i was wondering if anyone could improve upon or has a better idea how create a neon effect which works across multiple desktop/mobile devices. The neon light is a simple transparent png image overlaid on top of static background image. It works for time been 'good enough' for desktop browsers, but i had to disabled it for iPad, etc. because of the slow performance combined with rain (pixi-particles) and fog (custom particle effect). Live version: Code: //PIXI var PIXI; var Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite, ParticleContainer = PIXI.particles.ParticleContainer, extras = PIXI.extras; var street = new Container(); var weatherType = new Container(); var renderer = new autoDetectRenderer(3600, 720, {antialias: false, transparent: true, resolution: 1}); document.getElementById('street').appendChild(renderer.view); //View = 'block'; renderer.autoResize = true; //Variables var neonSign, neonFilter, colorMatrix, count = 1; function animateScene() { //Animate neonSign neonSign.alpha = 0.1; count += 2; var bright = 2 + Math.sin(count); neonFilter.brightness(bright, false); requestAnimationFrame(animateScene); renderer.render(street); } function setup() { //Setup neonSign neonSign = new Sprite(resources['images/one-stop-copy-shop_glow.png'].texture); neonSign.width = 1200; neonSign.height = 300; neonSign.position.set(1200,0); colorMatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; neonFilter = new PIXI.filters.ColorMatrixFilter(); neonFilter.matrix = colorMatrix; neonSign.filters = [neonFilter]; //Add neonSign street.addChild(neonSign); //Start animateScene(); } //Setup loader .add('images/one-stop-copy-shop_glow.png') .load(setup);