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
    • Facebook Instant Games
    • Web Gaming Platform
    • 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 193 results

  1. Hi every one... I am very new to pixijs... need do a userlogin screen, I am unable to figure out how to add a textbox to canvas .. please let me know how can I do that.. and I want present the table of data.. in the next screen as well so let me now how to add a table as like object to the canvas.. Thank you for your time..
  2. Hi all, I'm on the lookout for anyone who would be interested in collaborating on the development of a few PixiJS based games. I've done a fair few now myself but I'm quite pushed for time, I'm more of a designer than a developer & have a small backlog of projects that could do with a helping hand. Ideally I'm looking for someone more on the development side with at least basic graphic design skills needed to take the assets from a psd into the game (prepping atlases, 9 sliced sprites etc), but if you can do more than that all the better! Going forward the games will mainly be built in es6/PixiJSV5, with animation through GSAP & Spine. Example of the type of project we'd be working on below... If you're interested, feel free to drop me a PM and can go over in more detail and discuss rates etc, Cheers!
  3. NMN

    Brush Blur

    Hi All, I'm trying to implement a paint brush blur filter similar to the brush displacement filter here: https://codepen.io/PavelLaptev/pen/aLVbxG . Could anyone point me in the right direction? Thanks!
  4. Harryk89

    physics library

    Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?
  5. Unfold is looking for a “Senior Game Developer HTML5 / TypeScript” in Berlin. https://www.unfold.net/senior-game-developer-html5-typescript-berlin/ Unfold is a German game developing studio. We develop video slot games for the free-to-play & the online gambling market on multiple platforms. Unfold started as a pioneer in social betting. Founded in 2009, we were backed by premier venture capital firms Earlybird and Target Partners. In 2012 we became part of a leading family-owned European casino group. We are now a wholly owned subsidiary of Bally Wulff, one of Germany’s leading manufacturers of electronic gaming machines. Unfold is based in Berlin, Germany, Europe’s gaming hub. To lead the growth of our gaming portfolio we are looking for a “Senior Game Developer HTML5 / TypeScript”. Your Profile: Solid knowledge in TypeScript / JavaScript (OOP), HTML5 & CSS3 You enjoy an object oriented programming style You have working experience with PixiJS Understanding of separation of concerns, design patterns & testing Ability to deliver high-quality, clean code using agile, test driven development practices Aptitude for learning and sharing knowledge / skills, pair programming & code reviews You are a teamplayer and reliable English full professional proficiency, German is a big plus We are looking for someone who is a very versatile professional with a creative mindset, good logical and analytical capabilities, you think from a user’s point of view and you have the ability to prioritize & multi-task. Technologies & Tools we are using: TypeScript, JavaScript, PixiJS, Webpack, Node.js, Selenium, Maven, Jenkins, Git & IntelliJ. This is an excerpt – we adapt our technologies to the conditions and choose others if we think they are more useful. Your Benefits: Build state-of-the-art tech products Be part of a small but growing, highly skilled team developing the next generation of online games No hierarchies and quick decision making processes The best development hardware & software money can buy Attending conferences & trainings 28 days of vacation, very flexible and family friendly working conditions, home office days and no over hours Comfortable working place with free fruit & drinks Cookie driven development and team events How to apply? Please call or send your application to: jobs (at) unfold.net Unfold Gaming Digital GmbH Ramona Döbrich (HR) Colditzstr. 34/36 12099 Berlin, Germany It would be nice if you could add a link to Github/BitBucket and LinkedIn in your CV. Tel.: +49 (0)30 417 212 80 Fax: +49 (0)30 417 212 81
  6. Hello, I am a Korean developer. I play animation through pixi-spine. The problem is, I want to turn off anti-aliasing because my spine is low resolution When you false antilias to an option on canvas, other objects look like pixels, but spines don't. What should I do? Even if the translation is unstable, please understand.
  7. Hello i have some problems with pixi-layers.js. I want to move some sprites to top. I use pixi.v4 with this script: https://github.com/pixijs/pixi-layers/blob/layers/dist/pixi-layers.js Error message i get: pixi-layers.js:705 Uncaught TypeError: Cannot read property 'prototype' of undefined at pixi-layers.js:705 at pixi-layers.js:744 I add pixi layers in index.html this way: <script src="/socket.io/socket.io.js"></script> <script src="https://pixijs.download/v4.4.2/pixi.min.js"></script> <script src="src/pixi-layers.js"></script> <script src="src/keyboard.js"></script> <script src="src/client.js"></script> What did i do wrong? Thank you for your time.
  8. Solve an endless number of puzzles! The number of levels is not limited, new ones are generated by the algorithm Excellent graphics, dynamically changing backgrounds 6 difficulty levels It works on all devices running IOS and Android High-quality music and sounds Many hours of gameplay Tips for each level LINK: http://hitek55.ru/jewel_routes/ For licensing to write to the email: htmlgamedev@gmail.com
  9. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial
  10. Hi, I'm hoping you can share some ideas with me! I'm making web based games with Pixi.js and I'm having a bit of a hard time working with the graphics design team (this is not a developers vs designers issue!). I'm trying to find the best workflow that might help us both do our jobs faster, but I can't seem to find the right tool for it! The designers sketch and build the app in Photoshop, and I work in Typescript with Pixi. So... what we've tried so far was: they sketch up in PS and then generate all assets with TexturePacker, leaving me with a json file which I can easily import into my game. The downside of this is that I have to position every asset and create every container manually (or rather using a config file, but still that's kinda manual work). Our second attempt was that they sketch up in PS, then export that to Adobe Animate, and using the PixiAnimate plugin, they then create the files for me to use. This has improved our workflow, because I don't need to position anything nor create the containers, but there are still some flaws as they are not able to test interactive elements (they can't see how a button actually reacts unless I implement it), and I would love to not depend on Animate which seems fairly deprecated nowadays, and on an external plugin which is out of our control. Plus, designers (at least ours) do not think as programmers, and they don't make variable names easy for us. PixiAnimate creates objects using the instance name they put on Animate, but they don't follow any guidelines. If they have four items of the same group, they call them "item_1", "item2", "this_is_the_third_item", and "last_one". If there's a tool that can validate this prior to exporting (setting some kind of rules, like prefixes for elements), that would be awesome. So yeah, I'm asking for a magical tool. I know it doesn't exists, and I know some adjustments are necessary on both sides, but I'd love to hear from you guys, how do you work with your graphics team, what do they use and how do they deliver the assets to you! Thanks!
  11. Hi. I'm not a html5 game developer but Front-end developer trying to draw a line chart with pixi.js. So, my question is not about the html5 game but just about how can I use pixi.js correctly. I was recommended this forum from pixi.js official site. Anyway, the problem is chrome browser stopped after about 2 minutes later ticker started. See this code (https://www.pixiplayground.com/#/edit/S~1QvhfSNDyACDvb0nkfc) It's a simple code for a line chart. 1. Add a basic PIXI container 2. Draw the first line with 4 dots. 3. Add next line every second using PIXI ticker and Change line x position. It works nicely at the moment But about 2 minutes later, the browser is crashed. I don't know why and how can I fix it. Help me!
  12. Hi, I was trying to understand how to use Pixi-spine library that adds support for spine animations for PixiJS . But I did not find anything useful on the internet. Can anyone help me understand it?
  13. I want to restrict the size of the applied filter on canvas. In the below codepen i have set the displacement filter and moving it according mouse position. But the problem is it's covering entire background. I want to fix the size of the filter. I'm new the Pixijs and any help is appreciated. https://codepen.io/ajitcj/pen/yWOaaY
  14. Hi all.I am a beginner of pixi.js, and using PIXI.Graphics to create a circular progress bar that will move over time, the effect is like the one below: https://codepen.io/saadeghi/pen/IBhfJ More specifically, the circular progress bar moves over time. So, the graphics is modified constantly, this caused a very serious performance problem and even caused the iOS system to crash. My question is what should I do to implement such a circular progress bar in pixijs? My English is poor, thank you for reading.
  15. I have following tween I used to move an image in my game coords = { x: 0, y: 0 }; tween = new TWEEN.Tween(coords) .to({ x: 700, y: 200 }, 2000) .onUpdate(function() { cardImg.position.set(coords.x, coords.y); }) .onComplete(function(){ redoTween(); }) .start(); function redoTween() { cardImg.position.set(0, 0); tween._valuesStart = { x: 0, y: 0 }; tween._valuesEnd= { x: 700, y: 0 }; tween.start(); } This works as expected. I wanted to re-use the same tween to move the image to a different location. I would like to update "coords" to new location and; call say; tween.start(); Is there a way to do this? What I noticed was I can only use the it once. https://jsfiddle.net/wijesijp/85xavjrs/30/
  16. No matter what I try or how I implement things, I keep getting some jittery scroll movement. I was using the <canvas> tag before this, without PixiJS and it was a lot of jittery movement. Just one drawImage call per rAF-call would take far more than 16,6 ms. I used the <canvas> for drawing frames. But I also used the transform CSS property for instance. With and without CSS transitions. But currently I'm using PixiJS with a RenderTexture and the scrolling still seems somewhat jittery to me, though maybe less jittery. I'm not drawing vector graphics. I'm drawing images (PNG files actually). When an image has loaded I add it to a somewhat large RenderTexture (4096x4096). Because width of the images don't exceed 1024 pixels, I now store the images inside four columns of 1024 by 4096 pixels. I then have a sprite for which I create a Texture (which I recently found out to be just a reference to a BaseTexture combined with a certain frame). Each time I scroll I create a new Texture pointing to the same RenderTexture but using a different frame. Though at a certain point it seems I need two sprites with textures both pointing to the same RenderTexture but with different frames. Because, let's say, when the first frame starts at 4000 and I need about 800 pixels from the image (e.g. 800 could be window height or screen height) I need to have a frame pointing at the last 96 pixels of the first column within the RenderTexture and a frame which points to the other column, getting the remaining 704 pixels. Should this be a proper way of handling this? Or is there a faster way to handle this somehow? Maybe I could make sure to make the height of the columns within the RenderTexture are dividable by the current window height. Though then it would mean some column height would go unused (but then this would probably be true for all columns, so maybe not such of a big deal). And this reordering would then need to happen each time a resize occurs. I guess a large screen size (regarding height) would not work very well with how I'm handling this now? Any advice would be much appreciated By the way, I'm also using a small easing function which I call via setTimeout when there is movement. But the actual drawing takes place currently in the ticker function. It just calculates current scrolling speed, does not draw anything.
  17. Hello! The project is old so PIXI v.3.0.11 is used. For streaming - Flashphoner via WebRTC Steps to reproduce 1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv 2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance. 3. Somewhere after this the Firefox browser receives error thrown by WebGl: Additional information The problem is happened very rerely Only Firefox Stream(video element) is not failed after the error In the PIXI source code that means: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); What we tried tried to set video.crossOrigin = "anonymos" to the video element but no success. tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching I know it's not directly linked by PIXI but still I need help. And the image of the current block when exception was thrown.
  18. I saw the playground on Pixi at https://github.com/ivanpopelyshev/playground. I have learned that he is using typescript language and running on nodejs. Since I am not familiar with ts and nodejs, I can only access it through http://localhost:8080 after npm dev startup. Now I want to put him. Deployed to the web server on my window so that he can access it on the public network. May I do this?
  19. 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 LINK: http://hitek55.ru/islandsofcreatures/ For licensing to write to the email: htmlgamedev@gmail.com
  20. I am developing a game in which i have to click an image .after click it will flip and show prize after that i have to move this image and prize towards prize-board.during this movement i have to scale these images to fit into prize-board slot .how to solve this problem. please help
  21. Hey, guys! Did anybody experience this problem with shareAsync? Basically, it seems like shareAsync promise resolves too early and it also depends on a platform. Here is how it looks like in my code: case SHARE_ASYNC: if (p_param) { FBInstant .shareAsync( p_param ) .then( function() { console.log( "*** FBInstant.shareAsync() ok" ); if (p_callback) p_callback( null ); }) .catch(function( p_err ) { console.log( "*** FBInstant.shareAsync() failed: " ); console.log( p_err ); if (p_callback) p_callback( p_err ); }) } else { console.log( "***UPDATE_ASYNC: invalid parameter" ); } break; So, on: 1 On mobile I get *** FBInstant.shareAsync() ok whenever I tap on empty part of the screen in order to close native sharing dialog. 2 On PC I get *** FBInstant.shareAsync() ok whenever I click on Share button while native Fb dialog is being opened. Along with that, Fb throws some POST exceptions (screenshot is attached) I feel like instead, regardless of two cases, I should get *** FBInstant.shareAsync() ok whenever a user clicks Share button (in native window) and *** FBInstant.shareAsync() failed whenever he closes the native dialog. And, of course, no exceptions Any feedback is appreciated!
  22. I am using PIXIJS Canvas Renderer and trying to apply a graphics polygon as mask in a sprite. When add graphics polygon as sprite.mask, i am getting blank canvas. Am i missing something or its just stupid idea? JSFiddle code: https://jsfiddle.net/Lk2fjmn3/8/
  23. Hello, I am looking into game design, and decided to use the Pixi.js library for a project. The problem is that I am self-taught and unfamiliar with using Pixi. I am trying to resize a renderer created by the Pixi.autoDetectRenderer() method, but doing so messes up a simple background that I have loaded. I believe that the problem has to do with the order in which the program loads, because depending on how I open the website, the canvas may appear blank. When I attempt to load the website without resizing the canvas, the background loads well (when it loads at all). Any help would be appreciated. The small file containing my source code is attached. I apologize in advance for my ignorance! javascriptSrc.txt
  24. Hi Everybody, I'd like to use Spine in a Pixi project (either the latest v4 or directly starting with v5). I use webpack and npm and saw that Pixi his split pixi-spine into a different npm package. According to the readme of pixi-spine the runtime supports spine data from Spine version 3.5 up. But I only have a pretty old version of Spine 2.1.18 essential and don't want to buy a newer version at the moment because of financial reasons. I only use the basis spine stuff, so no deformations or other new (mesh-like) features. Could anybody please tell me why Pixi-spine only supports Spine 3.5 and up? Is it only because of the pro-features, or does it not work with spine 2.1.18 essential data either? Anybody knows what changed? Is it just some keynames in the spine json file, or only added (professional) stuff while the basic remained the same? Or is there more to it? And is there perhaps a version of pixi-spine out there that is able to import spine data from 2.1.18 essential while still using the latest v4 Pixijs (or v5)? Thanks a lot!
  25. Hi ! I have a mobile game based on pixi.js+pixi-spine (let's call it the client). I also have a backend in node.js (let's call it the server). Now, I want to dynamically generate gifs from my spine characters and display/send them from server's side. I have 2 options: generate the gif files on the client, send them to the server store my spine assets on server, generate the gifs server side I'd prefer option 2, but rendering on an headless server seems to not be a straight road. I tried quickly node-pixi, just the require is complaining about window missing. Anybody has experience doing tis kind of server side rendering? Any suggestions?