Search the Community

Showing results for tags 'pixi'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 396 results

  1. charlie_says

    Penny Drops

    This is a new (well, newish, but only recently completed & released) match 3 game in the style of an old slot machine. Have a play here:
  2. J. K. Sleepling

    Changing image resolution for mipmapping

    Hi there, I'm working on an app showing user uploaded maps (bitmaps). These maps can be of any resolution and often they are very large. Now down-scaling these images they become ugly and crunched, so I need to use mipmapping (Working in WebGL). I know mipmapping only works with "powered by two" resolutions, but is there any way I can resample my odd-sized maps, to fit into a "pb2" resolutioned baseTexture, and still know the original specs. Or how would you work around it? Thanks
  3. Kristiyan

    PIXI - many filters cause fps drop

    Hello everyone! I found that using filters to multiple sprites is causing frame drop(in my case 25 filters). After the frame is dropped, if i remove filters via console , the frame is again 59.9-60.0 . I will append image to show you what i mean.The way i append filter to sprite is in this way : var spritesLen = 25; for(var i=0;i<spritesLen;i++){ someSprite[i].filters = [myFilter] } I hope there is a fix to this issue :) Thanks.
  4. We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise https://github.com/pixijs/pixi.js/issues/5087.
  5. schubi

    Beppigames Puzzles

    Beppigames Puzzles Two non-casual puzzles I made some years ago, both original concepts. Made all puzzles first on board/paper, no generators involved. Mandatory to read the games rules, in game or on games homepage (game rules link). 1. Sandcastles Direct Link Game Rules A 30 level sliding tile game at the beach. You slide around "digging tiles": Where these cover sand diggings take place. Where your channels tap water they are flooded. Two objectives: 1. Every sandcastle in a level needs to be on its own island. 2. All seastars in a level need to be put into water. Created with plain Javascript and Pixi. 2. Peace Conference Direct Link Game Rules A 47 level logic puzzle based on the Four Color Theorem. You host an intergalactic Peace Conference. Its attended by psychotic politicians of four alien species of the Mars Attacks sort. Not unlike in a nursery your job is to assign every participant a place in the conference room and securing he does not freak out. Two types of rules must be fulfilled by your seating order: A chair rule states a pair of species which cannot be placed on neighboring chairs without raising hell. A table rule states species which must be placed on each table to achieve a pacifying effect in the room. In later levels you are assisted by staff of expertly skilled therapists (in martial arts ?) which can keep aliens in check even when chair rules are violated. Initial game was Android and a Java/C++ mix. Replaced the Java part with C++ and SDL and created the HTML5 version utilizing emscripten. You can mute the music in game options ("Silence"). For both puzzle games there are solutions available: Solutions
  6. SamYan

    Resizing Game Problem

    Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can tell me please what's the wrong? CSS body { background-color: rgb(0, 0, 0); width: 100%; height: 100%; overflow: hidden; } #pixi-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } JS const logicalWidth = 1280 // window.innerWidth; const logicalHeight = 720 // window.innerHeight; // Init Application let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true }); app.view.id = 'pixi-canvas'; // Add canvas to DOM document.body.appendChild(app.view); { ... } let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg"); rootContainer.addChild(background); app.stage.addChild(background); { ... } this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); window.addEventListener('resize', () => { this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); }); private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) { const scaleFactor = Math.min( window.innerWidth / logicalWidth, window.innerHeight / logicalHeight ); let newWidth: number = Math.ceil(logicalWidth * scaleFactor); let newHeight: number = Math.ceil(logicalHeight * scaleFactor); console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor}); renderer.resize(newWidth, newHeight); stage.scale.set(scaleFactor); }; RESULT
  7. Here I want to do a parabola of basketball。 I thought of using Pixi, but Pixi had no good built-in methods. Here is a demo I want to achieve:https://basketball.frvr.com/;He looks pretty good! How do I achieve this basketball track? And basketball has the feeling of radian.
  8. This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.
  9. Hello,guys! In the old days you remember Flash/AS3. There were free Flashdevelop IDE. It was perfect. You use all libraries in flash with perfect auto-completion, perfect debuging and so on. When flash is old and grumpy now every work with it is stopped of course. The perfect substituent of AS3 + Flashdevelop IDE we explored is Typescript + PIXI + Webstorm + Typescript namespaces - okay. But typescript + webstorm are made for angular applications so you understand there is bunch of problems. We were under pressure and had to create everything fast. Now we have time to explore for the best solution. Big games/applications can be made of pure javascript and it is trash - our opinion and experience. Can you tell your opinions, your experience, best practices and so on on Typescript, PIXI , IDE, other libraries and so on ? Lets make better code!
  10. Yehuda Katz

    Update group's alpha without a delay

    Hello, Is there any way to force Phase to update texture without a delay? Shortly said, I have issue with Phaser.Group.generateTexture() method: 1) Lets say you have group, which fade out to alpha = 0. 2) Later you want set group back to alpha = 1 and 3) generate sprite this.game.add.sprite(0, 0, group.generateTexture()) RESULT: you will get empty sprite... However, if I do lets say 100ms delay, everything works as expected... If I fade out group to 0.1 instead of 0, I am getting texture with 0.1 transparency, which means that PIXI needs time (one tick?) to actually update alpha. QUESTION: Is there any way to fix this problem? Thanks
  11. AlbertoVGDD

    Can´t manage AnimatedSprite to work

    Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either. // The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet} // containing the animation definitions: PIXI.loader.add("assets/spritesheet.json").load(setup); function setup() { let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet; animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]); } Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help. EDIT: I attached some pictures that showcase my issue.
  12. Rodrigo

    CanvasTinter newb question

    Hello, I was working with a simple canvas app (for now we can't use the webgl renderer so we're stuck with canvas) and we're trying to colorize some sprites. Since we're using canvas filters and shaders are out of the question so I was wondering if this is somehow possible using canvas?. I created a simple test using canvas tinter but the result is a fully painted canvas and not a tinted texture: const app = new PIXI.Application(800, 600, { backgroundColor: 0x9cbac9, autoResize: true, forceCanvas: true }); document.getElementById("app").appendChild(app.view); const bgTexture = PIXI.Texture.fromImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/landscape.jpg"); PIXI.CanvasTinter.tintWithMultiply(bgTexture, "rgba(179, 179, 179, 0.5)", app.renderer.context.canvas); const bg = new PIXI.Sprite(bgTexture); app.stage.addChild(bg); Here's a live sample: https://codepen.io/rhernando/pen/620bdae58717e0d3af021db73f096155?editors=0010 Thanks, Rodrigo.
  13. Olololz

    Pixi.JS / Pan & Zoom Canvas

    Hi, I'm using Pixi since several days on a game prototype which consists in a map made of tiles. The problem is that I got a big map (2000px / 2000px), so it don't fit a desktop screen, and not any mobile screen. I am looking for a way to allow the user to pan (i.e. navigating on the canvas with mouse drag and drops (for desktop) and with the finger (for mobile devices) zoom in / out the canvas Like in google maps for example Any idea of an embedded feature I can use? Thanks in advance for you answers.
  14. Hello, developers! I am wondering about PIXI v.3 or v.4, how much they can live and work on the internet. Imagine now I start big project on v.3 or v.4. This project should be licensed with little exceptions. Should I extract the whole code related to PIXI(my view) to be specially maintained over the time? What is the experience on similar cases? What is the risk?
  15. il7 Games

    What does it take to learn Pixi?

    Hello Devs, I would like to know, what do I need to learn to play with PixiJS? I want to create advanced games in 2d. I know Pixi is not a game engine and there are other frameworks like Phaser, Cocos2D, MelonJS and so on... Pixi will be useful to me to develop other projects besides games. Perhaps the most experienced here can give me tips and also other people who are having difficulties. Thanks.
  16. jinzo7

    PIXI version 5?

    Hello, PIXI friends! Still PIXI on the top ofcourse, our team is going to migreate the apps from 3 to 4. And we like very much PIXI. The exploring(chill) time comming for us and it is it time to form everything better. When version 5 will be stable? Why it is better ? It has better performance? We need to know everything, I need! LOL! Is version 5 is going to have good support of PIXI-Animate(Adobe animate) ? Tell me everything, please!
  17. Vishal Akbari

    Unable to decode image in IE

    On refreshing in internet explorer png images are not decoded and assets are not loaded. Only when tab is reloaded, it works in fresh tab for the first time. It happens in PIXI 4.5.1
  18. Hi, I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "http://pixijs.io/pixi-particles-editor/" and create an emitter so they could use that particle in our designs. I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this http://www.html5gamedevs.com/topic/34892-pixi-particles-emitter-how-to-make-it-move-from-point-to-point/ the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ??? is the place to go to get information? so far I think I need to create a server? install Pixi js (i don't know how) install npm ?? (I don't know why?) this is very confusing write know
  19. Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. This is example in codepen I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX = mouseData.data.global.x; mouseY = mouseData.data.global.y; TweenMax.to( displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: if ( options.autoPlay === true ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } This is pen with that "changed" part https://codepen.io/Frunky/pen/oMZbvr Also I need to load all items, but loads only one item. Why? Thanks
  20. AndrewJS

    Fastest way to do masking?

    Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile. I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites. It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object. Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays. The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite? I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now: https://github.com/pixijs/pixi.js/issues/2163 I just found the following with a possible alternative using multiply blending: https://github.com/pixijs/pixi.js/issues/3735 To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this? Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture? Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.
  21. gsknbabu

    Infinite Scroll

    Hi, I want to allow the user to either scroll to document bound borders endlessly i.e Infinitely drag on the canvas. Please help!!! Ex: A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas. Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser. Please refer the link https://gojs.net/latest/samples/scrollModes.html where user can start dragging the rectangle to the boundaries, scrolls automatically towards the mouse pointer. Thanks, Naveen.
  22. Siddi

    Dispatch Events

    Hi, I'd like to develop some automated UI tests for my PixiJS application (PixiJS 4.8.1). My test procedure should look something like this later: const test = new UITest() test.click({x: 100, y: 80}) test.drag({x: 100, y: 80}, {x: 120, y: 40}) test.dblClick({x: 200, y: 120}) etc. For this I have to trigger events. I know that the InteractionManager and DisplayObject inherit from EventEmitter. Which option is the best way to trigger events? 1. directly on the canvas element? const originalEvent = new MouseEvent('click', { bubbles: true, cancelable: true, ... }) app.view.dispatchEvent(originalEvent) 2. or via app.renderer.plugins.interaction.onPointerUp (originalEvent) for example? 3. or via app.renderer.plugins.interaction.emit(originalEvent) Unfortunately, I have not yet managed to trigger an event with these three ways 😞 What already worked was to call the emit method directly on a PIXI.DisplayObject, but I needed to create a PIXI.InteractionEvent object myself, which was quite expensive ... Thanks in advance! Siddi
  23. Hey everyone! Sam from Bitfox Games here for our studios' first post (and definitely not last!). I'm here to introduce our inaugural game release (well, it's been out for a couple of months now ). Bruh.io (https://bruh.io/) AKA Battle Royale: Unsung Heroes is a multiplayer 2d battle royale shooter. It features over a dozen different weapons, a 2d pseudo-isometric perspective, and a massive map. Gameplay consist of, well, trying to be the last person standing! Scrounge for weapons, healing items, weapon attachments & scopes. If you die early in a match, you can spectate the remainder of the round as a ghost, or queue for another server immediately. In order to survive, you have to outsmart your opponents! Since launch we've seen millions of rounds of battle royale played, and many other fun stats viewable on our website. We used PIXI for our visuals, Nengi.js + Node for our networking layer (and some client-side niceties that the library, and developer @timetocode, provides - he's actually a part of our team and actively works on bruh.io). If anyone has any questions about the way we've implemented anything, please don't hesitate to ask! Additionally, we would love feedback from other HTML5 game developers. There are bugs; but if you find any, let me know! There's a chance it's not already in our bug tracker. Some features that are on our near-future roadmap are: - Teams Mode (squads & duos) - Grenades - Two weapon slots Always open to more suggestions as well
  24. Hello! In the age of flash there was a well-known MVC frameworks. A lot of small and big, 2d, event-based games, portals, apps are built upon it. And now flash is almost dead. But the people and companies still has the same needs from that kind of content (games, engines, portals, ..). Our team found a very similar solution PIXI + custom MVC + Typescript. PIXI is so web and we have to maintain PIXI - a problem. 1. What framework should be used to create an event-based game today? Phaser - no. It's big for games without any physics and no onFrameUpdate needs ? 2. Is there out any new framework/approach to build and structure that kind of applications ? 3. Do you have some good ideas at whole? Give more ideas, solutions, best practices on web and etc. Thanks !
  25. The chart that is built on PIXI had sharpness problems and those sharpness problems were solved after avoiding half-integers and linestyle alignment. But now chart has some dark spot when plotting a diversified data in a large number of a dataset and for a small dataset, can't see any dark spot on the chart. I am not sure changes that have done for solving sharpness is causing this problem. Kindly support me to solve this problem.