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

  1. About the role A Game Developer at Roxor/Playsafe plays a crucial part of the creation of our awesome games. You will be working in a team that is responsible for taking the game from a concept stage to a finished game, optimized for both desktop and mobile devices. Not only will you write structured, testable quality code but you will also support our graphics and FX artists with implementing and coding art and graphical effects. We work in small agile teams consisting of a game designer, sound designer, producer, QA, artists and of course game developers. We believe that working closely in small team is crucial in creating the best games and it helps us in an agile way to take faster and better decisions. We develop our games in Javascript and TypeScript. They are rendered with the PIXI engine in WebGl and Canvas. To give the players the best experience, we put a lot of effort in optimizing our games for all platforms, both regarding file size and performance. We work in an ambitious, casual and fun atmosphere where we take a lot of pride in the games we create. Your Tasks ⦁ Participation in the design process for new features in the new games framework ⦁ Implementing new features in the new games framework ⦁ Implementing new games in games framework ⦁ Code Reviews of new features implemented by other developers Qualifications and Experience ⦁ +2 years of prior experience of software development as employee or contractor ⦁ Experience working with graphically performance-heavy web applications and games ⦁ Working experience with JavaScript, ActionScript, TypeScript, or similar ⦁ Working experience with any JavaScript based game engines, like PIXI, Phaser or similar ⦁ Interest in computer graphics programming, animations and effects ⦁ Good communication skills to explain technical requirements to the game designer and producer ⦁ Experience with client-server integrations ⦁ Understanding of good practice version control, artefact versioning, branching model ⦁ The ability to deliver in an agile, iterative environment where pace is high and all voices matter We also value ⦁ Experience with hardware-accelerated 3D techniques ⦁ Experience working with TDD and automated testing techniques ⦁ Any other creative skill, from sound design to 3D modeling Who are you and what do we offer We are seeking a social, positive, and driven person who can help us create the best video slots on the market. You are a team player with strong initiative and self-motivation thriving in a small team environment where the route from idea to implementation is very short. You should be collaborative, fun to work with and be able to augment our design process with great animation instincts and a firm grasp of the best tools for building cross platform experiences for the modern web. If your interested in the position please feel free to notify me at nico.vdmerwe@playsafesa.com. We are based in Cape Town, South Africa. GameDeveloperRole - Job Description.docx
  2. hi friends. I want dispatch a custom event for one sprite. for example: when click on bunny sprite. dispatch an event that name is : sayHello. i wirte this code: but when run and click on bunny show this error: but if i change this code: this.dispatchEvent to -> document.boy.dispatchEvent work successfuly. but i Want dispatch to my sprite or container . can do it????
  3. Hi there, I have a collection of sprite animations happening inside of a PIXI Container. I need to take a rectangle section of this animation and display it inside of a Spine animation using a Mesh. (this seems to be working all fine) However, I am able to do get the full contents of the container and place it into my Spine animation no problem using renderTexture, but I only need a small section of its contents. I thought I would be able to do something like this.... var party = PIXI.Container(); // Sprites of people in a party inside of here var texture = PIXI.RenderTexture.create(party.width, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim texture._updateUvs(); // on rAF update the mesh texture and apply to the mesh renderer(party,texture); slot.attachment.region.texture = texture; slot.attachment.updateUVs(); Here it looks like it should only use a section from 100 pixels in from the left and only take a 100 pixel wide slice, but it doesn't. I also thought I would create the renderTexture at the size of the slice I need.... var texture = PIXI.RenderTexture.create(100, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim But this just takes a 100 pixel section at the left most of my container. Maybe I could apply a mask to the section I need and create a texture from that or something?
  4. Hi all ! I'm currently working on a bomberman-like game, full of traps and special items and up to 10 players (objective: 100 players) The game is currently under development and we have a lot of plans to enhance it: new mods and modding engine new heroes, skins, biomes manage your account, friends, group host your local games and much more... (made with pixi.js, react & howler for the frontend) Play right now here: https://beta.starbomba.io/ Hope you'll enjoy and feel free to discuss
  5. 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..
  6. 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!
  7. 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!
  8. 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?
  9. 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
  10. 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.
  11. 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.
  12. 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
  13. 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
  14. 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!
  15. 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!
  16. 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?
  17. 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
  18. 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.
  19. 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/
  20. 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.
  21. 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.
  22. 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?
  23. 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
  24. 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
  25. 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!