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
    • 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 374 results

  1. Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. https://codepen.io/djmisterjon/pen/gzJVRR/?editors=1011 if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? Am using GSAP libs. thank a lot for help.
  2. About MGN Studios: MGN Studios is the new game development division of Freedom! Family Limited. Our mission is to create great games and technologies that actively engage and involve the YouTube community of players, bloggers, reviewers and creators. We’re setting up shop right here in beautiful Vancouver! If you want to join a start-up where you get to work remotely and build something new, and be a part of an honest & transparent leadership team with a veteran Studio Head, then MGN Studios is for you! THE ROLE: Are you up for the challenge? We are currently seeking a Senior Game Engine Developer to join our team in leading the architecture and development of browser-based video game engine technology. You will be the driving force in the design and development of our studio’s game engine infrastructure. You should be comfortable diving deep into technical architectures and requirements, able to quickly identify solutions to challenges discovered during development, and ready to direct and mentor other developers in creating a robust and scalable code base. Prior experience building browser-based multiplayer game technology is preferred. We are looking for someone to be a key participant in the creation of a collaborative environment that leverages agile development and rapid prototyping; rewards creative solutions and intelligent risk taking; fosters a culture of excellence, respect, and fun; and makes great games. RESPONSIBILITIES: Are you ready to make a contribution to our team? Lead the design, implementation, and growth of a browser-based HTML5 multiplayer game engine. Manage and mentor a team of software developers through the interactive development process. Set company-wide code development standards and best practices. Work with game designers and artists in the development of game features, art pipelines, and tools. Partner with producers, PMs, and other leads on schedules and plans. Identify technical and production issues/risks and propose solutions. QUALIFICATIONS: Do you have what it takes? Degree in Computer Science and/or relevant professional experience. 5+ years experience in professional software development. 3+ years of experience in the development of game engines. Very good knowledge of existing game engines (e.g. Unity, GameMaker, Phaser, Pixi, Turbulenz, etc.) and server side technologies. Deep knowledge of modular programming, API design, and game architectural patterns. Extensive experience with frontend and backend technologies such as HTML5, Javascript, CSS/CSS3, jQuery, PHP, Python, Node.js, MySQL, etc. Source revision control experience (Github preferred). Professional experience in agile software development. Experience working effectively in cross-functional game teams. Excellent oral and written English communication skills. Experience developing MMO city builder games is a PLUS Experience developing casual MMO .io games is a PLUS Experience with Apache Ant, iOS WebKit, Android Webkit / Chrome is a PLUS Knowledge of video platforms including YouTube, Dailymotion and Twitch is PLUS COMPENSATION: Competitive Salary Flexible work hours Flexible work locations (home, office, etc.) Are you intrigued? Here are a few more reasons to make MGN Studios your daytime/anytime home: Work remotely - Did we already mention you get to work remotely? Yes, it’s true! Leadership - Do you like working with veteran Studio Head who will give you clear direction, honesty and guidance, and believes people are the pillars to success. He’s the opposite of an evil villian with a curly moustache. Build something new - Play a role in building a game development studio that can’t stop and won’t stop growing. Career growth - Make an impact by leading projects and driving the direction of the studio. Develop initiatives and solutions that drive your career and boost the studio’s growth. For Freedom! Does this sound like you? Please apply asap as we are interviewing immediately for this permanent, full time position. PM and we can arrange a time to speak over the phone!
  3. chesovnik

    Mask with blur

    Hello! I have to make blur of the half of the screen (see photo). 1. I created my shape (via canvas or Pixi, it doesn't matter) and named it "shape". 2. I created Rect that covers the half of the screen: overlay.drawRect(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight); 3. I applied blur filter for this Rect: let filter = new PIXI.filters.BlurFilter(); overlay.filters = [filter]; 4. Then I mask it with my "shape": overlay.mask = shape; But nothing is happens. What I have done wrong? The main question is -- can I do it using PIXI? What is the best way to do it? I'm new in PIXI and I have already tried maybe everything, but haven't got what I needed. Please, help me :)
  4. Hi, I made a web-app for planning and visualizing time segments. It looks like this in action: napchart gif2.mp4 I do all the calculations in pure Javascript, and had to write a lot of code to code all the shapes make hit detection work for all shapes. I am drawing all elements in HTML5 canvas. I am looking into refactoring the codebase and adding more features. In that case I am wondering if a library rendering to WebGL would help me? Things I want: Easy way to prevent text overlapping Easy way to add small animations and slick effects Smooth animations with more complex and advanced shapes than in the video. The bottleneck is when animating the shape, and then the JS have to calculate all elements every frame, but would WebGL help with that? This is a non-trivial usecase, and I think it may be best to just use pure JS and canvas, but to be honest, I don't really know how WebGL works, and in what way it helps. Any WebGL heads here?
  5. 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 !
  6. Hi, guys. NeutrinoParticles plugin for PIXI is tested and released. You can download the Editor and check out video tutorials, samples and live demos at https://neutrinoparticles.com/ It is the best particle editor for PIXI. Isn't it?
  7. Tymski

    Cordova + Pixi = ♥?

    Hello everyone. It was probably a year since I posted anything. Good to be back here. I had a looong break with hardcore html5 game development. Can you suggest a good way to start a cordova + pixi project for android? Can you recommend any tuts and share some of your experiences with developing mobile apps with pixi I look forward to reading about your experiences!
  8. sta-ger

    Scaling down big images quality

    Hello! I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing: stage.scale.x = stage.scale.y = 0.2; https://jsfiddle.net/n67xwb5w/ As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi http://jsfiddle.net/qwDDP/ from here http://stackoverflow.com/questions/18761404/how-to-scale-images-on-a-html5-canvas-with-better-interpolation Can I achive the same smooth effect after rescaling in PIXI?
  9. We are looking for developers who can create our single-page web-based mini-games. We prefer to finalize the hiring in freelancer websites like Upwork to ensure proper delivery and payment. We have several in the pipeline and it has become a bit challenging to find Pixi developers in Upwork so we are trying our chance to find developers here.
  10. 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
  11. I have a game with a lot of containers and sprites. I used GPU-Z for testing. After I replaced all containers and sprites with 2D, GPU load decreased on 20% What is the reason of that? What is the difference between container / sprites and container2d / sprite2d?
  12. mazoku

    Car Racing

    Simple car racing game. Made with Pixi this time. Link
  13. paperjack

    Visibility of overlapping containers

    Hello, I am making an arena shooter multiplayer game with destroyable obstacles. You can see a pre-alpha here: http://mechsgame.s3-website.eu-west-2.amazonaws.com I have encountered a problem I'm not sure on how to proceed on and I surprisingly couldn't find any information on similar issues. My game will have tall walls and other obstacles which can potentially cover the player's character. I would like to make an effect similar to RTS games, where an outline or a shadow of the player is visible on top of the obstacle. See the below picture to get an idea of what I mean. My player container contains several sprites. I have a few ideas on how to do this, but I do not think they are optimal. One is rendering the player container to a texture and using that a mask for potential overlapping obstacles, along with a filter. Secondly is just placing a simple GUI marker that shows where the player character is. In both cases, I am unsure on how to detect overlapping sprites. Is there an established solution for such cases? Thanks!
  14. Muhammad Adnan

    Drag and dropping in a container

    Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  15. Is there a way to bind mouse action on PIXI.Graphics line?. I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. this.strategyGraphic.interactive = true; this.strategyGraphic.hitArea = this.strategyGraphic.getBounds(); this.strategyGraphic.click = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!
  16. charlie_says

    PIXI Loader handling failed loads

    This is more a question about how people try to do things rather than a problem with PIXI per se. What I've found is, if I force the loading to fail (by turning off WiFi or similar) PIXI behaves as expected, an error event is fired, and then the game will play but with missing assets. The question: How do people gracefully handle the failure? Do you force the loader to start over? Push the error items to an array and reload? (I think this one is good, but there's a possibility that you could get caught up endlessly in the game retrying); Ignore it? (hey it's the internet, things break from time to time!) Create an error screen, which has a link for the player to start over? (this is probably the best option.) Thanks!
  17. Igor Georgiev

    iOS soft fullscreen. How?

    Hello guys. I am struggling with having my game to run on minimal-ui on iOS safari. That is where the address bar becomes smaller when you scroll. I have found a game that does that, but how the hell they do it? CLICK Does anyone know how to achieve this?
  18. charlie_says

    (pre)Load video issue

    I'm having some issues loading videos... I can get them load ok, but, as I've got a number of separate videos that I need to sequence together seamlessly (or as close as possible to) I'm preloading them, or trying to... ...but, despite the texture appearing to have loaded, there's a delay in starting playback. I've tried a number of things, but would welcome any ideas that anyone has to getting an accurate idea of how much is loaded? I did have an idea that I could load a video as a blob, but I couldn't find an example of loading an item as a blob and then converting it, any leads on that would be welcome.
  19. OlegShaygu

    Pixi.js

    Hi! I'm a newborn at Pixi.JS and ask your help. I'm trying to put 4 characters on the stage in one line. They are moving one by one (in ticker function). Stage width is 928px. The gap between characters is 800px. And I can't understand why first three characters are put at the stage right way, but the last one is above the third one. It seems like the the width is not enough. What should I do?
  20. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur I've noticed this example (http://phaser.io/examples/v2/filters/pixi-filter) in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. https://github.com/photonstorm/phaser/blob/v2.6.2/filters/pixi/RGBSplitFilter.js) the filter gives an error because pixi is not included. So I'm wondering what is the right method to do it. I guess the main questions here are: is pixi-v4 filters compatible with phaser-v2 method of importing of pixi filters? if yes, where are the new filters (interested in the zoom-blur one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur)? if not, any pointers how to port them? Thanks!
  21. I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, antialias: true, transparent: false, resolution: 1}); renderer.view.style.position = 'relative'; renderer.view.style.display = 'block'; renderer.autoResize = true; renderer.backgroundColor = 0xFFFFFF; Area Chart Style Candle Chart Style Would like to hear any advice on the subject. Thanks in advance!
  22. Hey guys! I am kinda new to PIXI so I apologize if there is a super obvious fix to this problem but I am having a super hard time getting display objects I called buttons to show up. Button 1 and the TilingSprite appear just fine but the rest of the buttons do not. I looked at the contents of app.stage in my console and it says the buttons are all in there. Thanks in advance for the help! function playerSelect(){ // var onClick = function(){ new characterSelect()}; var stage = new PIXI.Container(); stage.visible = true // var container = new PIXI.Container(); var button1 = new Button("resources/button-small.png", 323, 162); var player1 = new Button("resources/player-select-buttons/1player-noselect.png", 293, 575); var player2 = new Button("resources/player-select-buttons/2player-noselect.png", 293, 575); var player3 = new Button("resources/player-select-buttons/3player-noselect.png", 293, 575); var player4 = new Button("resources/player-select-buttons/4player-noselect.png", 293, 575); //selected var player1Select = new Button("resources/player-select-buttons/1player-selected.png", 293, 575); var player2Select = new Button("resources/player-select-buttons/2player-selected.png", 293, 575); var player3Select = new Button("resources/player-select-buttons/3player-selected.png", 293, 575); var player4Select = new Button("resources/player-select-buttons/4player-selected.png", 293, 575); button1.position.x = 800; button1.position.y = 900; player1.position.x = 323; player1.position.y = 227; player2.position.x = 653; player2.position.y = 227; player3.position.x = 975; player3.position.y = 227; player4.position.x = 1300; player4.position.y = 227; player1Select.position.x = 323; player1Select.position.y = 227; player2Select.position.x = 653; player2Select.position.y = 227; player3Select.position.x = 975; player3Select.position.y = 227; player4Select.position.x = 1300; player4Select.position.y = 227; button1.on("mousedown", function(){ stage.visible = false; new characterSelect()}); player1.on("mousedown", function(){ stage.addChild(player1Select) }); player2.on("mousedown", function(){ // stage.removeChildren(); stage.addChild(player2Select)}); player3.on("mousedown", function(){ app.stage.addChild(player3Select)}); player4.on("mousedown", function(){ app.stage.addChild(player4Select)}); player1Select.on("mousedown", function(){ console.log("hit")}); app.stage = stage; var renderer = PIXI.autoDetectRenderer( 1920, 1080, {view:document.getElementById("game-canvas")} ); //switch to png PIXI.loader .load(function(){ var b = PIXI.Texture.fromImage("./resources/playerSelection-final.png"); var tilingSprite = new PIXI.extras.TilingSprite(b, 1920, 1080); tilingSprite.alpha=0.5; stage.addChild(tilingSprite); stage.addChild(button1); stage.addChild(player2); stage.addChild(player1); stage.addChild(player3); stage.addChild(player4); renderer.render(stage); }); } function Button(path, width, height) { var texture = PIXI.Texture.fromImage(path); PIXI.extras.TilingSprite.call(this, texture, width, height); this.tilePosition.x = 0; this.tilePosition.y = 0; this.interactive = true; this.buttonMode = true; this.viewportX = 0; } Button.prototype = Object.create(PIXI.extras.TilingSprite.prototype); Button.prototype.setViewportX = function(newViewportX) { var distanceTravelled = newViewportX - this.viewportX; this.viewportX = newViewportX; this.tilePosition.x -= (distanceTravelled * button.DELTA_X); };
  23. ikkleh

    Pixi-Spine and Spine v3.5.51

    Hello, I'm attempted to load a spine animation (v3.5.51) into the current version of pixie-spine (as it states that it's only compatible with Spine 3.5.x I'm not using the Pixi loader, instead I'm just passing in the loaded Spine JSON in the constructor. It's valid JSON with the bones/animation properties in there (so not a string etc) However, what I'm getting is a crash 'Cannot read property 'children' of undefined at new Skeleton': for (var i = 0; i < data.bones.length; i++) { var boneData = data.bones[i]; var bone = void 0; if (boneData.parent == null) bone = new core.Bone(boneData, this, null); else { var parent_1 = this.bones[boneData.parent.index]; bone = new core.Bone(boneData, this, parent_1); parent_1.children.push(bone); <-- ERROR/CRASH HERE } this.bones.push(bone); } The exported JSON is v3.5.51: "skeleton": { "hash": "m3kYx9f3hy1R9hSrlYyJs6o/0fk", "spine": "3.5.51", "width": 202.11, "height": 317.08, "images": "" }, Any ideas?
  24. charlie_says

    PIXI sound & IE 11 Loader issue (Updated)

    Hi, I'm working on a game that may need to be playable on IE11 (ugh!) Having got my basic game now working, I've found that the sound is failing, with the error: Object doesn't support property or method 'addEventListener' It seems that pixi sound should work, but, it's not clear to me why this isn't happening for me... Any ideas?
  25. Hi all, My project manages asset loading through it's own loading system (I'm not using the Pixi Loader) and I'm a little confused about using SD and HD assets. I export 2 versions of each sprite sheet (from Texture Packer) - 1 SD size (e.g. sheet.png) and 1 HD size (e.g. sheet@2x.png). My loading system then checks window.devicePixelRatio and loads the correct asset accordingly (SD for dpr=1 and HD for dpi > 1 etc). However, I'm a little confused as to setting the baseTexture resolution to tell the renderer the scale of the texture I know the Pixi loader does this, but how to I set this correctly according the the DPR without using the loader? Thanks in advance!