Search the Community

Showing results for tags 'pixijs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 129 results

  1. I have sprite image but i don't have JSON filie and also no idea .about how to create json file .. is there any JSON generator available in the web ?
  2. Less lag in video panning

    https://jsfiddle.net/y0tk7mk8/ - is my code so far I am wondering is there a way that would cause less lag when the mouse moves left, right, up, down, etc . Also is there a where that when the mouse goes out side of the canvas to keep on panning to show the whole video
  3. Hi all, i am trying to use Pixijs inside a vue instance and have encountered a strange issue. I know it might no be directly related to Pixi.js and you can jump to the tl;dr section for a question about how to update sprites locations, thanks, ------------------------------ All worked as expected when i used the particle container example from Pixi's official website. https://jsbin.com/jewapiyuzo/1/edit?html,js,console,output But now I want to have more control over the location of those sprites, like using an array to re-assign x, y, of each sprite. so I add a reference of pixi instance as vue's data element at line 12 and received an error It would throw a similar error if I want to pass a reference of ``maggots`` by using this.pixiInstance = maggots. jsbin seems to have added some protection or sandboxed this but it would caused a stackoverflow if you run this directly inside Chrome. So I am really desperate here on how to access ``maggots`` so I can loop thru and update all its elements... My last resort would be removing the canvas dom element and redraw it everytime i have to update the sprites data. i really don't want to do that Edit1: I am using the import below to import pixi, not sure if this would make any difference. =================TL;DR and Pure Pixijs question========================= Once you have initialized a Pixjs instance and have added sprites to it, what's the best way to access the instance so you can loop and update sprites' x, y values?
  4. Arcade Builder NG Launch

    Heya guys, Today I've decided to put Arcade Builder live on Newgrounds, hopefully I'll get some feedback and then can but this project to bed after any tweaks and then onto the next project. Arcade Builder is a business simulator which lets you build and manage your own games arcade. You can find the link here: http://www.newgrounds.com/portal/view/696901?updated=1500890537 If you have a Newgrounds account it'd be great to receive some votes/reviews. It is written in HTML5 and uses PixiJS to render. It took roughly 5 months in total with a lot of chill time in between (lurking here and playing games). I still plan on doing more with this game, but under a different title/theme next time, I'm thinking of adding crafting. For those who may be interested, here is my favourite video during development: I have created a playlist of all the footage I took during development: Thanks guys, have fun, Jam.
  5. I am a new user of PixiJS and wondering, how we can visualize weather data using PixiJS with or without Mapbox. Some sample demos (not PixiJS implementation) are https://mapbox.github.io/webgl-wind/demo/ and https://earth.nullschool.net/ and there are couple of data sources (e.g., http://nomads.ncep.noaa.gov/) publicly available. Can anyone share any PixiJS implementation of weather data with brief explanation?
  6. My code has a setup function that runs at the start. Within that setup function I have the left and right arrow keys setting up movement like so: left = keyboard(37); left.press = function(){ moveCharacterLeft(); }; It works fine. But then when I get a gameover my game runs a reset code and all variables are reset back to their former states and the setup function runs again. Well this means that the above function runs again as well, and this makes it so that each time I get a gameover and reset the game, the above function will run multiple times for each button press. So after one game over, if I hit the left key, the moveCharacterLeft() function will fire twice, and my character moves twice as far.. Three times for the next gameover.. ect.. Does anyone know how I can prevent this from happening? Admittedly I don't quite understand what's happening here..
  7. I am trying to visualize cascading effect of natural hazard/disaster on interdependent critical infrastructures applying WebGL. Suppose I have two critical infrastructures- Water Distribution system and power generation system with geolocation (latitude/longitude). Due to flooding or Hurricane, some substations of power generation system may be damaged and as a consequence, some substations of water distribution system may stopped working due to the power outage/blackout. So, is it possible to create an interactive visualization displaying effect of flood/hurricane on the substations of power system and damage effect of power substations to the water substations using PixiJS? Please note that I need to visualize both systems on geographic map and cascading effect/failure of substations over time (maybe, using slider to show cascading failure per minute/hour in a 24 hours day). Attached is an image showing both intradependency in a critical infrastructure and interdependency between 5 critical infrastructures. Any related PixiJS example of web visualization with real/fake data will be highly appreciated. Thank you.
  8. Hi all, I'd like to show my first game that I've developed called Matchy Matchy. I've made a couple of small demo's in the past, but never a fully finished game. I consider this game at version 1.0, but can think of many many improvements. The game is a one versus one match-3 game. You can play against other players or against the computer in a series of levels that gradually get harder. I would love some feedback! Nick (www.exciit.com)
  9. Inverse Masking

    Hey guys, I've trawled through google, here and the github repo but couldn't find a good way to perform an inverse mask. I need the mask to be applied on every rAF, so generating a new canvas and re-uploading the texture to the GPU and rendering is going to be to expensive I think. I've read that this is very easy to do in WebGL, but I would like to keep canvas fallback if possible. I already have a mask texture that I want to apply, but obviously it's being used as a normal mask. Are there any good performant solutions for this?
  10. Hi Guys, The issue I'm having at the moment is with zooming and pinching a web page (pinching on laptops) with my game in it - causes the game to zoom in and therefore change the UI of the game. A demo can be seen here of the issue, simply zoom/scroll to see various bugs appear throughout the game once a new game has started: https://jamdonut.com/prod/0.8.2/ I can't seem to find just one solution for disabling zoom and pinch altogether on all browsers - am I missing something here? Any clues or tips, the renderer is PixiJS. Thanks, Jammy.
  11. Obviously this isn't optimal. Was wondering if maybe I'm doing something wrong? I have a standard game loop that's managed by requestAnimationFrame(gameLoop); and within my gameloop I have a function that moves each enemy like so: enemy.position.y += 6 I don't really know what to do to keep my movement speed from varying so dramatically across different devices. Another issue that might be related, over time my sprite movement becomes gradually faster and choppier. This is the part that really really bothers me. Any help or insight would be deeply appreciated.
  12. Get all sprites?

    Hi guys, Not too sure where to find this or if it's possible but is there a way to get an array or object containing all the sprites that are currently in the renderer? Thanks, Jammy.
  13. 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?
  14. Massive Sprite optimization

    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.
  15. Hi Everyone, Career Cruising is looking for a Senior HTML5 Game Developer in Toronto. The full job description is here https://jobs.startupnorth.ca/jobs/1995608-senior-game-developer-at-career-cruising 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!
  16. 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
  17. Pixi Loader not working

    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 this.game = 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) } }
  18. 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:
  19. Dancing TextField with right align

    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: https://jsfiddle.net/7dv61c63/ Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  20. 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!
  21. Remove child

    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?
  22. 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?
  23. 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
  24. 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