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

  1. 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
  2. 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
  3. 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: htmlgamedev@gmail.com
  4. 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
  5. 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';
  6. 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.
  7. Hello there! Please see our posting for this job over at: https://www.upwork.com/jobs/~01bae059f7aea88b0b 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!
  8. 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, https://labrat.mobi/games/move_the_crates/ Some screenshots: Here is the video of the game working in XBOX One browser,
  9. 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!
  10. 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: davidochmann.de/content/html/aape/aape.html davidochmann.de/content/html/aape/runner.html 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
  11. 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.
  12. 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 http://caniuse.com/#feat=arrow-functions). 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.
  13. 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: http://5701.nl 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 renderer.view.style.display = '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);
  14. I want to create 5 possible animations text instances that cycle through every time an action happens (like a button press for example). I am thinking this needs to be an array that increases the x position with a for loop (i++). What is the syntax for an array of text objects that can be cycled through with a for loop? Thanks in advance. Im new at pixi this is what I have so far: //Aliases: this is shorthand var Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a Pixi stage and renderer and add the //renderer.view to the DOM var interactive = true; var stage = new Container(interactive), renderer = autoDetectRenderer(500, 500, { antialias: false, transparent: false, resolution: 1 }); document.body.appendChild(renderer.view); var btbTexture = PIXI.Texture.fromImage('https://res.cloudinary.com/dubyisimd/image/upload/v1481228417/buttonplaceholder_iit0dp.png'); var btn = new PIXI.Sprite(btbTexture); btn.scale.x = 0.5; btn.scale.y = 0.5; btn.anchor.x = 0.5; btn.anchor.y = 0.5; btn.position.x = 55; btn.position.y = 475; btn.interactive = true; btn.on('mousedown', () => console.log('mousedown')); stage.addChild(btn); //load an image and run the `setup` function when it's done loader //add images by: //.add("images/beerCup_logo.png") .add("https://res.cloudinary.com/dubyisimd/image/upload/v1481228417/buttonplaceholder_iit0dp.png") //creates a progress statement that will check to see if assets are loading .on("progress", loadProgressHandler) .load(ScrollingText, addButton); //.load(); //this function will check to see if all assets are loading to the stage. loader function loadProgressHandler(loader, resource) { //Display the file `url` currently being loaded console.log("loading: " + resource.url); //Display the precentage of files currently loaded console.log("progress: " + loader.progress + "%"); //If you gave your files names as the first argument //of the `add` method, you can access them like this //console.log("loading: " + resource.name); } //button: function addButton() { button = new sprite(resources["https://res.cloudinary.com/dubyisimd/image/upload/v1481228417/buttonplaceholder_iit0dp.png"].texture); stage.addChild(button); button.x = 15; button.y = 15; } //text scroll: function ScrollingText() { //Im thinking this is where the array of 5 possible text positions should be text = new PIXI.Text('This is a pixi text', { fontFamily: 'Oswald', fontSize: 24, fill: 0xff1010, align: 'center' }); stage.addChild(text); text.x = 500; text.y = 0; gameLoop(); } function gameLoop() { requestAnimationFrame(gameLoop); text.x -= 1; renderer.render(stage); }
  15. I feel embarrassed, but after doing a lot of research I can't seem to be able to implement this simple feature. Can anyone here who's familiar with pixi walk me through how I might accomplish this? Things I've tried... I'm trying to use .on('click', move) and then I have the move function right now set to just return the value of the pointer. I can't even get my code to return anything, let alone move the sprite. I've tried doing stage.on('click', move); and it just doesn't work. I get no errors in the console. nothing. It just doesn't work. After that, I tried creating a rectangle and using rectangle.on('click', move); I even fill in the rectangle with a color to make sure it's actually there. Nothing. my code is just unresponsive. No errors no nothing. The only time my code works is when I use the .on('click', move) on the actual sprite I'm trying to move! sprite.on('click', move). It will then return 'undefined' indicating that I at least got that far... I can provide my code if needed. But first I wanted to just check in and see what the best practice is for this, and if I'm just missing something elementary.
  16. Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.
  17. Hi everyone, I wanted to share our latest release, Vikings vs Monsters with you. It's a turn based RPG where you control a squad of vikings defending their village against invading monsters. You can find more info and try it out here: http://spottheorangegames.com/html5-games/#VikingsVsMonsters The game is available for non exclusive licensing. Feedback is greatly appreciated. Thanks!
  18. I'm having a load of trouble with Pixijs right now. I have a game with click and drag mechanics, and I'm wanting it so you can't drag the sprite outside of the bounds of the renderer. my renderer resizes dynamically. For the freaking life of me, I can't figure out how to grab the current size my renderer so I can use it in conditionals. I'm trying to use: "renderer.view.style.width" but console.log returns it as undefined....wat? I tried using renderer.width, console.log returns that also as undefined. To make matters more hair rippingly frustrating, earlier today both of those pieces of code returned actual values. now none of them return anything. I can't even explain why that's happening. Any help with how to keep me from dragging my sprite off the stage, or figure out how I can obtain the renderer's size would be wonderful. Thanks so much. And sorry if I sound ranty.
  19. ZigZag is a short, re-imagining of the classic Snake game - and another collab with @TM999. Uses pixijs which I've become quite familiar with now, and is my first attempt at integrating matterjs. I'm again using GSAP for all movement, and howlerjs for sound. matterjs is in there for collision detection, but due to the nature of the game I don't need to update the physics every tick, rather I call an update on the engine only when the player performs an action. I'm completely new to physics engines, and the static? structure of matterjs functions took a while to get up to speed, but once you get a feel for the library it works pretty well and seems quite performant. There is some glue required considering pixijs is responsible for the graphics scene tree, and matterjs is responsible for the bodies, but the end result is quite nice, so I do recommend others to try matterjs if you haven't already. Play on Web Play on iOS Play on GooglePlay
  20. Play ( Fr / En) : http://www.a-lyrae.com/host/vega/carpediet Jump on platforms to rapidly collect some fishes. Earn medals for your best chains, and set new records. Browser game, for mobile & desktop. Carpe Diet is a free mini game I made in my spare time. More details here : http://www.vega-workshop.com/home/carpediet (I'm not english native, if you notice some weird english writings, please tell me, thx <3)
  21. I am looking to have an alien in pixi fade out all pixelated-like when it has reached the center of the screen. I am very new to Pixi, and coding in general, and haven't had luck with JQuery communicating with Pixi. Is there a filter that I can use to make this creature fade out? I currently have the alien simply disappearing when he reaches the center of the screen per the below code, but that doesn't look cool. function animate() { spaceship.position.x += (target.x - spaceship.x) * 0.1; spaceship.position.y += (target.y - spaceship.y) * 0.1; if (alien.position.x <= window.innerWidth/2) { alien.position.x += 2; } if (alien.position.x === window.innerWidth/2) { alien.visible = false; } if(Math.abs(spaceship.x - target.x) < 1) { reset(); } renderer.render(stage); requestAnimationFrame(animate); } Please help.
  22. I am drawing shapes and on click, I highlight the shape by bold black border, also I add small circles on the shape vertices. How can I add more vertices by mouse in run time. Also How can I move the current vertices by mouse. Thanks in advance.
  23. Dakara Online is a medieval MMORPG made using PIXIjs, jqueryui, howlerjs and much more. The source code is available, the client is released under the MIT license and the server under the GPL. Its based on an argentinian MMORPG called Argentum Online. GAME LINK: http://web.dakara.com.ar/ SOURCE CODE LINK: https://github.com/horacioMartinez/dakara-client
  24. I still didn't make any progress with pixijs. Every time after a couple seconds i get the Aw, snap! error in chrome. I think it's caused by PIXI.Graphics. (in the begin function) I solved it but i don't now it's the correct way: MainLoop.setMaxAllowedFPS(60); //Create the renderer var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight); //Add the canvas to the HTML document document.body.appendChild(renderer.view); //Create a container object called the `stage` var stage = new PIXI.Container(); var graphics = new PIXI.Graphics(); window.onresize = function(event) { renderer.resize(window.innerWidth, window.innerHeight); }; var opts = { "objects" : 10000 } var fps; function seed(){ //the most important line in the whole game cells = []; //let's generate some random cells for(i=0;i<=opts.objects;i++){ cells[i] = { "x": chance.integer({min: 0, max: renderer.width}), "y": chance.integer({min: 0, max: renderer.height}), "vecx": chance.integer({min: -3, max: 3}), "vecy": chance.integer({min: -3, max: 3}) } } } function begin(){ // Remove all objects we rendered last time so that we can add a new set. graphics = new PIXI.Graphics();// IF I REMOVE THIS LINE, I GET THE AW, SNAP ERROR! stage.removeChildren(); } function update(delta){ //update cells for(i=0;i<cells.length;i++){ cells[i].x += cells[i].vecx; cells[i].y += cells[i].vecy; } //fps fps = Math.round(MainLoop.getFPS()); //usually 6 fps only } function draw(){ //add the cells as children graphics.beginFill(0xFFFF0B, 1); for(i=0;i<cells.length;i++){ graphics.drawCircle(cells[i].x,cells[i].y,1); } graphics.endFill(); //Tell the `renderer` to `render` the `stage` stage.addChild(graphics); text = new PIXI.Text('FPS: ' + fps,{fontFamily : 'Arial', fontSize: 12, fill : 0xff1010, align : 'center'}); stage.addChild(text); renderer.render(stage); //drawing fps } //calling seed function seed(); //setting up loop MainLoop.setBegin(begin).setUpdate(update).setDraw(draw).start(); Im using mainloop.js and chance.js as libraries. And why is my fps so slow?
  25. Hi everyone. (And sorry for my english below) I want to change from canvas to webgl so I am learning pixi.js. But after googling on the world wide web some things are not clear for me. A couple questions: -How about the gameloop? In every example they use requestAnimationFrame or something. I'm used to work with the mainloop.js library which structure is very easy: begin();update(delta);draw(); Can i use this library with pixijs? Or is it better to use requestAnimationFrame? And if i use requestAnimationFrame, how about delta time? Delta time is really important to me because i often make cpu intensive simulations. The framerate will not always be 60 fps. - What is the best method in pixijs to draw a million of separate pixels on the screen? For example fluid simulations.