Search the Community

Showing results for tags 'pixi.js'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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

Found 199 results

  1. Hi everyone, I have been working on another io game, and the first version was completed almost two weeks ago. Here is the link Features: The game is based on mining resources and creating a fleet with the points you collect. Ships auto shoot nearby resources or other ships. Players can buy ships with the resources. On the map, there are 4 health regen areas marked as green on the minimap. Development Notes: I used pixi.js and shockwave filter for explosions Howler.js for spatial audio Communication is in a binary format. The game also works on mobile devices, thanks to pixi.js. There is no client side prediction, everything is calculated on the server. The web server uses node.js for static content. The game server is written in C++ using uWebSockets. Here is a video on my twitter. I would like to hear what you think about this, Thanks!
  2. Dynamically Adding sprites to Scene

    Hi there, I'm developing a simple shooting game where objects fall from the top of the canvas and you must click them before they hit the ground. I'm wanting to dynamically add sprites to the stage by a set Interval of time, starting at about 1500ms getting progressively faster. At the moment i'm using set Interval but can't seem to change the rate it runs my function. Is there a better way of adding sprites like this within the Game Loop? Thanks, AJ crispFallRate = 1500; //Start the game loop ticker.start(); addCrisps(crispFallRate); function addCrisps(interval) { addCrispsGlobal = setInterval(function() { if (state == play) { let createCrisp = new Sprite( resources["../img/fwbbq-crisp.png"].texture ); // Set initial crips position off canvas createCrisp.position.set(Math.random() * (app.renderer.width - createCrisp.width), -createCrisp.height); // Make sprite interactive createCrisp.interactive = true; // Bind click event createCrisp.on('click', clickedCrisp); gameScene.addChild(createCrisp); crisps.push(createCrisp); console.log("add crisp: " + interval); } else { return; } }, interval); } function clickedCrisp() { //Remove hit crisp this.visible = false; // Update score counter score += 100; scoreCounter.innerHTML = score; crispFallRate = crispFallRate - 100; }
  3. Hi all, I'm trying to help a developer I know find a talented individual (NOT a company, or current employee of any company) who can work remotely on HTML5 projects and has DEEP familiarity coding in Typescript. Familiarity with pixi.js and experience porting Flash games to H5 are also nice to have, but not necessarily required - the ability to learn quickly is more valuable than institutional knowledge for this team, but knowledge of Typescript (or other "formal" training with object-oriented coding) is absolutely essential for this role. I can't share the identity of the team, but it's been around for over 10 years now and boasts a solid portfolio of popular Casual games for the PC Download, mobile, and online/web markets. Please feel free to contact me with your resume/CV, sample games, or anything else that would make you a good candidate to consider for this position. Competitive compensation negotiable based on experience! Thanks! Joe Cain Mr. Shoes, Inc. (sorry, no website yet, but I promise this is legit and I won't waste your time!)
  4. pixi js documentation crashed???

    Then i am opening pixi js documentation and click on any links, buttons i got this: Why it happens?
  5. Hi everyone, I made a slot machine with three reels. And faced with "spinning reel problem". There are many articles on this issue. I think I am quite close to the solution but bumped into the wall with stopping TilingSprite on specific position. It is quite the same issue as below but with pixi.js. My evolution of "reels spinning" was the following (if not interested please go to point 4 with questions): I pushed my slot icons (sprites) into array, and displayed on three rectangles (reels, drawn with Pixi.Graphics.). On pushing spin button I shuffled the arrays and display them again. I got randomness dsiplaying but no spinning animation. So tried next step -> Try to make spinning effect with Tween.js. But as I treated every slot icon as single element, there were issues with spinning syncronizations and move directions. I believe with some advanced logic I can reach "spinning effect" here, but decided to find more simple solution -> Here I come of with combining all reel icons into one rectangle (each element is array element which contain icon sprite (like apple etc)): this.rectangleReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]); then, creating TilingSprite from this rectangle, and positioning it: this.tilingReelThree = PIXI.extras.TilingSprite.from(app.renderer.generateTexture(this.rectangleReelThree), this.rectangleReelThree.width, this.rectangleReelThree.height) this.tilingReelThree.position.set(363, 210); this.tilingReelThree.tilePosition.set(this.rectangleReelThree.position.x, this.rectangleReelThree.position.y); of course added it to the stage, then actually an issue. I came up with the following variables to control spinning: this.y_3; // this one to pass value for moving sprite on y axis this.distance_3; // number to count down from, as soon as it reaches 0, this.y_3 -- 0, and spinning stops. realization is the following: var position = function () { // this function is called from update() main animating function if (this.y == 0) { } else { this.tilingReelOne.tilePosition.y += this.y_1 * 12; this.tilingReelTwo.tilePosition.y += this.y_2 * 13; this.tilingReelThree.tilePosition.y += this.y_3 * 14; } this.distance_1--; this.distance_2--; this.distance_3--; if (this.distance_1 <= 0) this.y_1 = 0; if (this.distance_2 <= 0) this.y_2 = 0; if (this.distance_3 <= 0) this.y_3 = 0; }; //this one is trigerred on Spin button push var spin = function () { this.state = SLOT_STATE.SPINNING; this.y_1 = 1; this.y_2 = 1; this.y_3 = 1; this.distance_1 = 150; this.distance_2 = 220; this.distance_3 = 275; }; As result I got nice reels spin, but they stop on different positions (not in line, or fixed position). Also from this point I can`t check if reels combination meet neither win nor lose combintaion, as TilingSprite treated as one whole object. So here are the questions: Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top). Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? Thank you in advance,
  6. Progressive texture upload

    Hi, I am building a media installation (with Pixi.js v4) which requires to load my textures while the system is running (ideally with a constant 60fps). Therefore I am using createImageBitmap in a Webworker instance and then transfer the ImageBitmap via transferable object to the "main thread". In the main thread I am using this approach to pass the ImageBitmap to Pixi's Texture Loader which then ultimately uploads the texture to the GPU via gl.textImage2d. This all works fine as long as I am using small textures but now I wanna load bigger textures (1920x6000px) and the texture upload starts to take a decent amount of time (70ms). Now to my question: Has anybody created a progressive texture upload for pixi.js similar to this threejs library? If not, what would be the best approach to tackle this? Basically I have similar requirements as the poster in this thread (again unfortunately wrong framework Thanks, Andreas p.s.: I've started to look into pixi.js v5 ... seems like createImageBitmap is coming, yeah!!!
  7. Hi, I am using pixi to display a texture that consists of alternating black and white rows of pixels. Unfortunately, pixi doesn't show these as black and white, but rather shows grey wave-like patterns that look like there is a lot of aliasing happening. That would make sense if the size of the texture did not match the size of the pixi view on which it is shown. Yet in both cases, width and height are 256. An alternative explanation for this could also be that pixi is attempting some form of pixel interpolation, yet my application is created with roundPixels=true and resolution=1. Where am I going wrong here? Thank you, ifru
  8. [WIP] Silone.Online MMO TBS

    Title: Silone.Online Genre: Online TBS with elements of tactical simulator and RPG. Platforms: Web Tech: ASP.NET, Angular, Pixi.js, SignalR, Howler. Developer: Combat Dices Team Hello, everyone. I am an indie game developer from Tomsk, Russia. In my spare time I develop my small project - Silone.Online. Periodically I accept help from friends and third-party developers, artists, musicians. Work is conducted from 2016. Now the game is implemented: - A global map with many provinces. - A unique system of character development, based on the work performed, and not on the levels. - Dialogues, usually ending with a quest. - Craft equipment and lots of resources. - Free trade between players. Direct game link here: Development Log in VK Page on Patreon Gameplay video
  9. summerslam

    This is a casino slot game made with pixi.js with high score mode "summerslam" migrated from as3 - to - pixi.js => rendering is super fast
  10. Hi everyone, I've been working on a pixi.js - typescript boilerplate using webpack that I would like to share just in case someone finds it of any use. It comes with a helper class to manage some "trivial" tasks such as resizing, stage alignment, toggling full-screen and some utilities like fps-meter and a container to display some visual info. It's a bit heavy on dependencies though. Any suggestion, bug report or improvement submitted would be very much appreciated. Thanks!
  11. Calling all HTML5 game developers! Here at Goodboy Digital we are looking for developers with a passion for HTML5 game making to come and join a team who really love what they do. If you want to kick out some of the best HTML5 games going with us and help work on cool R&D projects like Pixi.js (and some secret ones too!) then please apply and show us what you got Apply here: Merry Christmas! Mat
  12. Hi guys, I am using AnimateCC to output canvas animations and would love to know how I would go about using the json file that is made available for download when using: . My objective is to simply create a particle emitter and then use it within my animation, but I have trouble connecting the dots. Ideally the Pixi json would need to be included in the published js file. Any tips on where that code would need to go exactly? I added the pixi library as a global script to the Animate file, but was wondering if someone could walk me through the process of combining the power of AnimateCC with PIxi.js Any tips are welcome! Thanks!
  13. Pixi Spine runtime error

    I'm trying to use some spine animations in a large Pixi application at work. It's mostly working but I'm getting intermittent runtime errors coming from the Spine objects. This error is:Uncaught TypeError: Cannot read property 'transform' of null at Spine.e.updateTransform (pixi.min.js:formatted:4401) at Spine.autoUpdateTransform (Spine.ts:479) at e.updateTransform (pixi.min.js:formatted:4405) at e.updateTransform (pixi.min.js:formatted:4405) at GameScene.e.updateTransform (pixi.min.js:formatted:4405) at e.render (pixi.min.js:formatted:8605) at Function.ScenesManager.loop (ScenesManager.ts:273) at t.emit (pixi.min.js:formatted:13126) at t.update (pixi.min.js:formatted:13068) at _tick (pixi.min.js:formatted:12988) The error is coming from PIXI.Container, line 323 because this.parent is null. This is a bit bonkers because this is only being called because the spine object is in the children list of the scene being rendered. this.transform.updateTransform(this.parent.transform); I dug in a tried to isolate the problem and found that somewhere in the Spine update function the parent was being set to null. In Chrome debugger I put in some conditional breakpoints for dt>0 && this.parent==null and found that the culprit was line 184 this.state.apply(this.skeleton); Before this line the breakpoint doesn't trigger, after it it does, with this.parent being null. I had a read through AnimationState.apply and I can't for the life of me see anything that would be setting the Spine parent state. So my question is can anybody else see anything in there that might be creating this effect? I should say that the application does a bunch of complicated pooling of symbols, so the Spine object might be getting removed and sent back to the pool then re-added frequently. But my understanding was that since JS is mostly single threaded if this.parent exists on line183 but not 185 something between there must be setting it to null. I'm not extending or doing anything else to the Spine object. Unfortunately I can't give out any coded to show the context. I'd be really grateful if anybody has any suggestions or input.
  14. Gaming Innovation Group (GiG) is seeking JavaScript game developers for its brand new in-house HTML5 iGaming studio in the heart of Marbella on the Costa Del Sol. If you have experience with JS frameworks such as PIXI and and have an interest in online games, then GiG offers an exceptional career opportunity for you. Job description and application links here: Learn more about GiG here:
  15. Recently I am building an io game like But I encounter 2 problems now. First, after reading up some articles in this forum about the camera on pixi.js.I found the best way is to set pivot to the container. I try this and work greatly. But I just wonder can I create another container called camera to perform the functionality of camera instead of using app.stage as a map and camera at the same time? Secondly, what is the best way to get my circle bigger when I eat a food? The only way I think of is using PIXI.Graphics to draw a new circle and replace the old one with it.But it seems time-consuming and stupid. Are there any better solutions? Thx everyone! Below is my test code on pixi. import * as PIXI from 'pixi.js'; // SOME ALIAS const Application = PIXI.Application; const Graphics = PIXI.Graphics; const Sprite = PIXI.Sprite; const ObservablePoint = PIXI.ObservablePoint; const Container = PIXI.Container; const Point = PIXI.Point; // CREATE A NEW PIXI APP const appConfig = {width: window.innerWidth, height: window.innerHeight,antialias: true, view: document.querySelector('#root')}; const app = new Application(appConfig); // CREATE NEW SPRITES const spriteMove = Circle(0xffffff,30); app.stage.addChild(spriteMove); const spriteStop = Circle(0xe83a30,50); app.stage.addChild(spriteStop); // SET CAMERA // FIXME CAN'T NOT BUILD A INDEPENDENT CAMERA MAYBE BECAUSE OF THE PIXI ORIGINAL DESIGN const camera = new Container(); app.stage.position.set(app.screen.width/2,app.screen.height/2); // ANIMATION app.ticker.speed = 0.1; app.ticker.add(()=>{ spriteMove.x += 0.5; spriteMove.y += 0.5; // GROW BIGGER // app.stage.children[0] = Circle(0xfff,r++); // IT DOES NOT ASSIGN REFERENCE SO IT HAS TO BE PUT IN ANIMATION LOOP app.stage.pivot.copy(spriteMove.position); }) // GRAPH FUCNTION function Circle(c, r){ const g = new Graphics(); g.lineStyle(); g.beginFill(c); g.drawCircle(0, 0, r); g.endFill(); const s = new PIXI.Sprite(g.generateCanvasTexture()); s.anchor.set(0.5,0.5); return s; }
  16. I want to build a game like I create a first and then create a container called clientView insides. I render all my sprites on app.stage and I want to render clientView to my window so that when the client move , I only have to move the container and render it to my windows. Do anyone have good suggestion to implement this, and can I only render a container instead of the whole stage? thx everyone
  17. I'm facing problem in getting screenshot of current state of canvas, which is get rendered dynamically using pixi.js library. Below written code i'm using to generate canvas and when i use toDataURL() function on dynamically generated canvas it always returned black image. /* PIXI Renderer object of the game. */ var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }); /* This code i'm using to change color of button on canvas. Which work fine.*/ var whiteButtonsArr = whiteButtons.graphicsData; for (i = 0; i < whiteButtonsArr.length; i++) { var button = whiteButtonsArr; button.fillColor = WHITE_BUTTON_FILL_COLOR; whiteButtons.dirty = true; whiteButtons.clearDirty = true; return true; } After some analysis i have changed the code to render canvas (added preserveDrawingBuffer attribute )to get current screenshot of canvas. After adding preserveDrawingBuffer attribute i'm able to get the current state of canvas using toDataURL() function. But button's color is not getting changed on UI. Although while debugging button.fillColor pick the color but doesn't reflect on UI. /* PIXI Renderer object of the game. */ var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }, { preserveDrawingBuffer: true }); Please let me know if any other approach or way is available to take screenshot. Thanks in advance.
  18. What i need I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one. What i tried I tried to use DisplayObject.mask property var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL); let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL); let square = new PIXI.Sprite(squareTexture); let circle = new PIXI.Sprite(circleTexture); square.mask = circle; app.stage.addChild(square); app.stage.addChild(circle); But in addition to clipping it also modifies clipped sprite color So is there any way to clip sprite in Pixi while keeping it's original color without using simple shapes painted with Graphic (i really need to do this with any texture with transparent pixels)?
  19. Pixi.js and Angular2

    Hey y'all, I made a package that I have been heavily using and honing in a game I'm working on. It allows you to use markup to create PIXI scenes. I'm hoping it'll help someone out there (and help make PIXI easier to use with angular2). Currently, it's not really optimized for performance as it's in its early stages (and I'm not that talented). If anyone has suggestions, feedback, or just wants to give it a whirl here is the github and npm info. It is being actively developed and maintained. FYI: on the roadmap is more support and out-of-the-box components that implements PIXI's built in features.
  20. Mad World is Opening Halloween Event. And You can connect with Only Click Please Enjoy Now Many user playing and tomorrow We will be More Contents like Inventory, Levelup, New Boss, New Maps and more we are opening events. please check FACEBOOK Please thx a lot You can check More Info Here Check More Infomation here please ^^ d
  21. For a day or two i have this weird issue that i can't fix. I am making a map with interactive trees. When i click tree i want it to change its texture to chopped trees. class Tree { constructor(sprite, deadTexture){ this.sprite = sprite; = 20; this.deadTexture = deadTexture; this.sprite.interactive = true; } chop(){ console.log("chop"); = 0; this.sprite.texture = this.deadTexture; } } let tree = new Tree( new PIXI.Sprite(textures.treesTexture), textures.choppedTreesTexture ); /*...*/ tree.sprite.on('click', () => { console.log("chop"); tree.sprite.texture = textures.choppedTreesTexture; }); this part works almost fine. I attached a gif that explains what is wrong. I don't know what to do and i can't find any help. What is causing such behaviour? if you need some more information about code, please let me know.
  22. [Pixi] - an original real-time multiplayer game with funny flying creatures (birds, cats, pigs, bees, mix...) Play now Made with Pixi.js, Node.js Also available on Android. Thanks for testing! __ is a multiplayer game where you control a piaf. By moving, dashing around and eating small food pellets, you can grow larger and larger until you are the biggest piaf on the server! Features and How to play1. Attack or defend yourself by using your Balls and Rings - each Dash temporarily makes you untouchable, deactivate one Ball and creates a killable Ring! 2. Grab and eat up to 3 piafs smaller than you. You slowly absorb the mass of the eaten piafs but they can dash out of your body after a few seconds.3. Customize your skin to your taste, then show yourself to the world
  23. Hello guys! TL;DR: I'm seeking for team mates to build space 2.5D top view multiplayer deathmatch game with machine intelligence. I have working on "cruiserwars" game for a while. When I started it was huge plan for things which I want to have in this game, but getting fail by fail I realize situation. Right now I can say, what exactly can be done, why I'm making this features and can describe product's vision in three phases. My game is huge and I figured out that will be better to separate it to several small games as united products. First game I want to introduce there to find team mates, form a team and lead development to transform idea to real product. "Cruiserwars Arena" You have been involved in infinity war against others by playing for AI race in distant space in one of the space sectors. By following your main instinct, your role to get maximum amount of kills to keep your intelligence in cluster's database. Soon, main CPU will use your grabbed data for production of determination fleet against humans. Phases I. Infinity battle in a sector against bots. It will be first release with offline game mode, where you can fight against smart CPU built on top of machine learning technology. As a player you should take a first place in leaderboard with higher score of kills, but your scores will be flushed when if you die. Share with your score in social network and invite friends to play for higher score. II. As CPU become smarter, other players are too involved in battle as you. You should be really mastery to kill other players and bots and get higher score in leaderboard. Invite you friends in a game, fight against multiply enemies and show who is a best CPU ever made. III. You found that scores are data which can improve your skills and technologies. Use scores to enhance your spaceship details: cabin, wings, thrusters, turrets and other parts of your spaceship can become better look and performance. Show your spaceship's design and power and become first in leaderboard. Key features – Customized and destroyable spaceship's parts: wings, turrets, thrusters and sub-systems; – CPU becomes smarter by playing with you and other players by utilizing machine learning technology; – Leaderboard and unique spaceship's parts for winners; – Play through the browser, even from your mobile / tablet device along with desktop, anytime you want; – This game is only part of something upcoming (part of the bigger game). Already has As browser multiplayer games are still not investigated yet and there a lot of work should be done before implementing real features, better to say not a lot! – Scene management, assets loading, assets storage, set up lifecycle actions for your scene loading and switching; – Entities, commonly renderable objects on your scene, beside each of them has an actor who control the entity; – Actors, it's part of the logic which can manage input controllers and entity which they applied too (for ex.: PlayerActor and NPCActor); – Keyboard, mouse controllers; – REST services to retrieve information about specific player, sector and spaceship (client-side only with mocks). and other small features.... You see that a lot of features almost technical implementation of architecture. I'm worried about clean code which can be scaled soon, but as time is going and I'm prefer do not write tests on current stage. Tools and libraries – Javascript ES6-7 (Babel) with OOP way programming; – Webpack 2 for bundle building; – Node.JS webserver, node.js game server and node.js microservices (koa/express); – React to build user interface, server-side rendering behind the scene; – Pixi.js rendering engine to show graphics; – ESlint for code quality; – Axios and WebSocket API for communication; – MongoDB, redis to keep users data; – Passport.js for authorization process; – SCSS + postcss autoprexifer; – Docker to build images; – Amazon AWS as end delivery platform; –, skype, trello for visual communication and task management; Who is needed to accomplish the game? Hero #1 – Digital artist You will be responsible for drawing sprite graphics and leveling. For example to draw different parts of spaceships, asteroids, backgrounds with description of each of your work for end customer. Hero #2 – Machine learning back-end node.js developer You will be involved in development of game server and AI machine learning system, set up connection with mongoDB and redis. Hero #3 – Sound composer Write sounds for lasers, thrusters, explosions and other more, beside you will be engaged in development of music tracks for battle scenes. Hero #4 – Javascript front-end developer Build user interface for game elements, build FX and game logic on client side. Requirements – Experience building stuff based on your role, some resources to show; – Desire to build game by using best practices, do not make anything without understanding why are you doing this; – Listen for team-mates, follow direction of the product's vision; – Time to work with game more then 5 hours per week; About my self My name is Andy, I'm trying to make massive multiplayer space game in browser with absolute freedom. Before I have made a lot of experiments and right now time to make real game product with goal to get budget for next development. I'm working in banking sphere for several years at role of software engineer and basically spend my free time after work for game development. There, I want to show my self as product owner to enroll the business part of the game, beside to build top-notch visual solutions for a game as a developer. Better to say I'm working with both front-end and back-end part, with design of user interface and project management. What you will get if enjoy development? – Of course international experience, portfolio, knowledge; – Your own game and money at the end of development as shared revenue between all of team mates; – Team and partners who will help you in building your ideas in real; – Use last top-notch techs such as machine learning, did you ever dream to build killing machines? You are welcome. – Chance to get your own place in game studio if project will succeed. Contacts Skype: AndyTyurin Email: Thanks for reading, sorry for mistakes, I'm not native speaker. Hope you deals are going well, continue to have a nice day!
  24. Can't render anything.

    So it's been a while since i played with pixi.js, there has been new version etc. I have used version 4.4.0 last time. Has lots of things changed? Anyhow, here is my jsfiddle: As you can see, you cant see any text in the canvas. I also tried with texture atlas, but it renders nothing. Did i do something wrong? This worked before.
  25. Hey has anyone checked out here? It's an official basebuilder for Supercell's popular mobile game Boombeach. I think it's very cool and I checked the browser console. Yah, no doubt it is built in PIXI.js. It's super smooth and has very high quality details. Just look like the same as it is in the mobile game.