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

  1. voste

    PIXI shaders

    Hi , I have problem to pass matrix to uniform variable in shader ! Can anyone tell me what is worng. I try by using "getUniformLocation" but when using this webgl function i get error that i not using current web gl programm. Thanks !!!
  2. Hi, I need help with shaders in pixi . I trying to translate and rotate sprite with shaders. I am using PIXI.Filter but I can find any example with vertex shaders(only fragmet examples ). If someone can provide some example . Thanks
  3. Hi guys, I have more info about the game coming soon but would like to start getting help from more people in terms of testing. I'm looking for any flaws here, errors, game play issues, bugs. Some I am aware of from prior testing and still have yet to figure out and resolve although the game should allow you to play through. The game is a simplistic simulator which allows you to build your own arcade, the walls, the machines, the floors, everything. If you've played prison architect or Rimworld you'll probably see the resemblance which I drew inspiration from. The game is planned to work in any browser and any mobile tablet. Sadly a phone version may just be too far away/complex to achieve. At current the game lets you start the tutorial and then continue to play through on the tutorial level. You can pan the camera with W A S D or by touching the edges. [update] Latest Version here: https://jamdonut.com/prod/0.8/ All feedback appreciated, thanks guys. Jammy
  4. Hello everyone, Recently i finished my first medium-sized HTML5 game - Medieval Defense Z. I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't. This is more like review/tutorial type of thing, so hopefully someone will find something useful. • Goals: • 60fps. • Smooth gameplay and animations. • Quality comparable to flash games. • Tools: • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript. • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried. • Debugging: Chrome. Has console, debugger and profiler. • Rendering library: Pixi.js. Uses display list concept like flash. Works well. • Sound library: Howler. Good enough, the id system is a bit weird though. • Bitmap font exporter: http://kvazars.com/littera/. Free and web-based. • Sprite Sheet Packer: https://spritesheetpacker.codeplex.com/. Freeware and very simple. • Graphics: • Scaling will look ugly if you use many small png files for textures. • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too). • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation. • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio. • Sounds: • Library: Howler. • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count). • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup. • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit). • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen. • Mouse Events: • Used pixi.js API to open links. • iOS Safari: window.open under "touchstart" event won't open links in new tabs, use "tap" event instead. • sprite.on("mousedown", callback) for desktop. • sprite.on("tap", callback) for mobile. • Performance: • Reuse frequently used sprites. • Avoid creating too many objects every frame. • I would recommend looking up data-oriented programming to get more juice out of Javascript. • Record timeline with Chrome profiler to find performance bottlenecks. • Masks are slow. Use trim if you only need a simple cut. • Very large functions may cause lag spikes. My best guess is that browser is trying to optimize the function. Splitting big function into several smaller ones solved my problem. • Game Debugging: • Simple CSS + DOM side menu. • Basic field view/edit. • Simple buttons with callbacks. • How to debug html5 game on android (mobile) with desktop chrome (PC): 1. Upload game to your website. 2. Go to (desktop) chrome: chrome://inspect 3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development). 4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed). 5. To quit debugging enter: adb kill-server • Conclusions: • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging. • Would have liked more automated solution for spritesheet and sound stuff. • Poor performance bites sooner or later, so be prepared to do extensive profiling. • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame. • Overall i am happy with the results, however it took longer than expected to make this game. Any feedback is appreciated. Game Link: http://html5games.vooxe.com/a90bd3f1fba643828ccfb0109b41a252/index.html Trailer:
  5. Hi, On some Android devices canvas renderer works better and stable than Web GL Some games may crash in Web GL mode when in canvas mode all games stable. I want to ask is there any way how can we detect it ? Maybe some benchmarks exist ?
  6. Here is my code: https://pastebin.com/iH355eYP. The problem is, when a "bullet" collides with a "character" from an area above the character's "head", it is being counted as a collision. I've tried all of the advice I could find on the forum such as setting the height/width of the sprite body and whatnot, still no success
  7. Hello, everyone. I've been playing around a lot with Pixi.js trying to find the best ways for memory optimization. Using Pixi's loader, I load my images. Some images are very large and for the first time creating and adding them to the stage, my game freezes for a moment. After reading around, I realized that freeze is Pixi uploading the texture to the GPU. Now, my question is, would it be ideal to add in a method to pixi's loader that after the texture loads, it uploads it to the GPU? That would stop the brief freeze. I have already used Pixi's built in method to upload to the GPU and the freeze is gone. What would be the pros and cons of doing this for every texture loaded? Thank you!
  8. Hello there, I'm trying without success to find all stages and renderers that PIXI has in memory, so I can call destroy on them and their children. I'm sure there is a way to have that so I don't have to keep track on my application. It is a React website and therefore the component that had that reference is unmounted and then mounted again later on. When I instantiate a new stage and renderer, I can see them piling up and using a lot of memory as I go from one part of my website to another. How could I find all instances so I destroy them before creating new ones? I have the global PIXI object on window... Thanks a lot!
  9. Currently, when a client moves, the inputs are processed on both the client and the server which use the same calculation to process the movement. When the client receives an update from the server, the servers position will override the clients position. I would hope that the client and the server would calculate the same positions, but that is not the case. I believe timing is the culprit. What is the best practice when syncing movement? Current flow: Source: https://github.com/GodsVictory/SuperOnRoad
  10. Hi! I'm using pixi 4.5.3 and can't find a way to clear out an rectangle from my transparent render texture. Seems that all blend modes have gl.ONE_MINUS_SRC_ALPHA in them Is there any hack around this? I have a large renderTexture with mostly static bitmap text and I want to update only parts that have changed for better performance. Is there any other way to update only part of an rendertexture while retaining transparency? Thanks!
  11. I'm trying to get my tilemap to scale and I'm basically following the example here: https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js#L17 However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
  12. Do you want to make good looking and well performing web games for a wide variety of devices? Do you want to help create real-time multiplayer games, played by millions? Hidden Monster Games is in search of a senior JavaScript developer that wants to join our studio to create accessible, competitive online multiplayer games. We want a programmer who will help us add a lot of juice, polish and fun to our games. Join our small team, where you can have a direct influence on almost every facet of our games and studio… and earn a good salary. Work at Hidden Monster Games Hidden Monster Games is working on expanding its very popular game ‘Curve Fever’. Curve Fever has millions of fans, but we want to re-envision the game in HTML5 for web and mobile, as well as creating other competitive, accessible multiplayer HTML5 games. Key aspects of your role will be to: - make games in Pixi.js and React - write clean code with the help of TypeScript - implement stunning graphics, effects and animations - optimize HTML5 games for a variety of devices Team We believe that great teams make great games. This means that we: - set clear goals - have the freedom to decide how the goals of the team are best served - share ideas inside and outside of the team, so we can continually improve ideas and process - practice respectful collaboration - always try to learn and improve ourselves We heavily value a team of professionals with a deep understanding of their specialization and understand what it takes to work together to make great games. Therefore, we put a lot of effort in clear communication and encourage team members to go to events, near and far. Once a year we all attend one major gaming conference. Last year we went to GDC. We provide the team with all the necessary tools, equipment and an awesome and inspiring environment. We frequently have lunch together and it is not unusual for us to grab a beer and play a game after work. Studio We are situated in the vibrant city-center of Amsterdam, right behind the Dam square. This allows for inspiring walks over the cobblestone streets, canals and through the picturesque scenery of the city. Our studio is on the top floor with a great view of the city-skyline from our large windows and balcony. The studio itself is spacious and inspiring, with some cool graphics on the walls. It is an open workspace, but we put a lot of effort to enable focused work. The studio is fully equipped for brainstorming and collaboration. Among our work spaces we have a lounge, meeting room, balcony and a quiet room. This enables our diverse team to work in different locations and get fresh perspectives to find solutions. Our development philosophy - Small agile team consisting of professionals - Scrum with biweekly sprints - Community focused design - Share our progress with the player community - Share our progress with the game development community Requirements - 3+ years professional experience in JavaScript - Good understanding of Pixi.js and React - Knowledge of pixi.js and React libraries and tools - At least a Bachelor degree - Willing to relocate, the job is onsite in Amsterdam - Willing to expand your knowledge - Experience working with scrum - Give constructive feedback on design, process and people - Receive constructive feedback on design, process and people - Wear multiple hats, and help out in other areas when necessary - The job is a full time job We offer - A small team (8 people) that is talented and ambitious - The possibility to shape a team and company - A professional team culture built on trust - Direct impact on the game and input on game design and art - An attractive office in the city center of Amsterdam - Help with relocation Salary Competitive salary, also compared to other sectors, depends on experience. Apply by sending a cover letter, CV and example source code to work@hiddenmonster.games .
  13. I am creating new AnimatedSprites on pointerdown event (and deleting them on next pointerdown event) over the course if application lifetime. At some point around 20 clicks, the app crashes with an error: Rats! webGl crashed. At that point no error is displayed in console. Crash happens on a mobile device, and would probably also happen on desktop, if someone perform plenty of clicks. Code that is repeatedly used is below. I also include live example at http://forwardingsolutions.club/. Can someone please point out what am I doing wrong? From other answers I deduced that you need to reset the loader and call destroy() on animated sprite. I call both of this methods, but there is still an issue. function createNewAnimatedSprite(resources,newLoader){ var tmpSprite = new PIXI.extras.AnimatedSprite(setupFrames(resources["nextSprite"].texture.baseTexture)); app.stage.addChild(tmpSprite); spritesArray.push(tmpSprite); setupNextSprites(tmpSprite); app.renderer.plugins.prepare.upload(tmpSprite, function(){ console.log("updoaded now"); canRunNext = true; newLoader.reset(); //console.log("kill"); delete tmpSprite; }); } function setupNextSprites(nextSprite){ nextSprite.x = app.renderer.width / 2; nextSprite.y = app.renderer.height / 2; nextSprite.anchor.set(0.5); nextSprite.loop = false; nextSprite.animationSpeed = 0.5; nextSprite.visible = false; nextSprite.onComplete = function (){ console.log("animation finished"); isAnimating = false; }; } function setupNextAnimation(){ var randomNumber = getRandomInt(0,3); switch (randomNumber) { case 0: nextColor = "red"; break; case 1: nextColor = "aqua"; break; case 2: nextColor = "green"; break; case 3: nextColor = "purple"; break; } } app.stage.on("pointerdown", function () { if (firstRun && !isAnimating) { firstRun = false; isAnimating = true; currentSprite.gotoAndPlay(0); currentSprite.gotoAndPlay(0); }else{ if (canRunNext && !isAnimating){ isAnimating=true; if (currentSprite.visible){ currentSprite.visible = false; currentSprite.destroy(true); } spritesArray[spritesArray.length-1].visible = true; spritesArray[spritesArray.length-1].gotoAndPlay(0); app.stage.removeChild(spritesArray[spritesArray.length-2]); spritesArray[spritesArray.length-2].destroy(true); canRunNext = false; setupNextSpritesAnimation(); } } }); function setupSpritesAnimation(){ //created currentSprite just once at the start of app spritesArray.push(currentSprite); }
  14. Hi there, Can anyone here point me in the direction of a Live2D tutorial or library that would work with Phaser? This seems like an interesting concept and I have not seen anyone try this yet to my knowledge. http://www.live2d.com/en/ https://avgjs.github.io/pixi-live2d-example/ Thanks in advance!
  15. EDIT: TANKS TO :Jammy EDITOR: http://pixitools.jamdonut.com/ TANKS TO :bigtimebuddy FROM http://mattkarl.com/ EDITOR: https://pixijs.github.io/pixi-text-style/# SOURCE: https://github.com/pixijs/pixi-text-style ___________________________________________________________ hi !, is there a pixi.text generator for the style. Because I find it very long to try different configuration styles without preview. similar as pixi-particles but for the text style ? http://pixijs.github.io/pixi-particles-editor/ thank a lot for help
  16. Its down for almost a month or something like that. No updates, no news, nothing :/
  17. I use this code to setup a texture atlas animation: PIXI.loader .add('out2', 'assets/out2.png') .load(function (loader, resources){ onRotationsLoaded(loader, resources) }); function onRotationsLoaded(loader, resources) { first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture)); app.renderer.plugins.prepare.upload(first, function(){ console.log("loaded first"); // ready to go }); } function setupFrames(name) { var frames = []; array is an array that stores correct position for each frame of animation for (var i = 0; i < array.length; i++) { var rect = new PIXI.Rectangle(array[i].frame.x, array[i].frame.y, array[i].frame.w, array[i].frame.h); frames.push(new PIXI.Texture(name, rect)); } return frames; } I would like to change the texture of the AnimatedSprite first in a click event or something. The new texture needs to be fetched from the server(I do not want to load it at start, because there are too many of them). I could destroy first and create second AnimatedSprite, but is there a way to just change it's texture atlas image?
  18. bhargavaman

    Help a noob!

    Hey guys! I'm starting a new project and I think this is the best place I can find some help. The way the story progresses in this upcoming project is very akin to an interactive graphic novel. I was wondering, would Pixi be the way to go? I see in one of their showcases they do in fact have a graphic novel in there, but I'm absolutely lost about how to start creating something like that. As far as I can understand, Pixi doesn't have global variables, right? So for example if the reader makes a choice in Chapter 1, is it possible to call that variable in Chapter 2? I'm exploring Pixi because it's a project focusing on mobile devices first, desktop browsers second. For app creation, I'm looking at Cordova/Crosswalk. Anyone who could point me in the right direction? Any advice is greatly appreciated!
  19. Hello visitor! I'm looking for skilled javascript developer to build small web game for 2 weeks with me. My main goal to get know more about pixi.js by doing valuable project for estimated time. What you will get at the end of development? You can share game with others, it will be your own portfolio; You can stay with me for next 2 weeks to monetize the game to get revenue from advertising. I will share 50% with you; If you not familiar with pixi.js, you will get experience by doing real project and you will spend only 2 weeks to get results; You will meet good guy (me :)), we can collaborate to do next projects which will give you money. Who am I? My name is Andy Tyurin. I'm working in banking sphere in a role of front-end team leader. I spend my free time by working with my own 2.5D game engine which is written on Dart. I'd like to build games, but I haven't got any real games to show, which can be described as a problem for me, but I did a lot of examples build on top of three.js, lwjgl (java). Except the fact, that I'm Dart enthysiast, I'd like to work with other languages such as javascript, node.js and java. Which tech stack I want to use by doing this game? Pixi.js as rendering engine to build 2D game; KOA framework to build REST, websocket server (node.js); React to make UI components. What about project, any other information? The game is called as "Space football". I will glad to tell you more, please contact first by skype: AndyTyurin Kind regards!
  20. Hey there! Catacomb Chaos is an endless action arcade game where you try to survive against unrelenting waves of skeletons. You can loot gold and purchase potions for your next life. Let me know what you think! Play here: https://sambrosia.gitlab.io/catacomb-chaos/ I learned some neat stuff making this. Engine design, ECS, and steering behaviors are some of the cooler things I experimented with for the making of this game.
  21. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(resources.cards.hearts.10.texture);
  22. trsh

    Scale text question

    So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?
  23. Hi, this is my first post I'm trying to use an image (png) as a container mask, it seems to work well on macOS but on Windows 8.1/10 ( ie11, edge, firefox 53) mask has no effect. Here is the simple code var app = new PIXI.Application(window.innerWidth,window.innerHeight); document.body.appendChild(app.view); var baseContainer = new PIXI.Container(); app.stage.addChild(baseContainer); var theMask = PIXI.Sprite.fromImage('mask.png'); var baseImg = new PIXI.Sprite.fromImage('base.jpg'); baseContainer.addChild(baseImg); baseContainer.addChild(theMask); baseContainer.mask = theMask; I'm using PIXI 4.4.1 Any idea why this is not working? Thank you
  24. Hello, How do I make my canvas look the same on all devices? function PixiPlay(){ var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false}); document.body.appendChild(renderer.view); var root = new PIXI.Container(); I saw a tutorial talking about Pixiv4. But he talks almost nothing about the canvas Can anyone teach me how to do this, in a simple way, please?
  25. Having trouble implimenting Pixi in Phaser. However i run into this problem below. Files are located all correctly including core and abstractfilter and displacement filter. Uncaught ReferenceError: require is not defined(anonymous function) @ VM10606:1c.Loader.fileComplete @ phaser.js:74078c.Loader.xhrLoad.f.onload @ phaser.js:73590 Any Clues? I am using this forum for reference: