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


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 178 results

  1. [Pixi] Piaf.io

    Piaf.io - 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! __ Piaf.io 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
  2. Hey has anyone checked out here? https://basebuilder.boombeach.com/en/builder/ 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.
  3. Hello guys! TL;DR: I'm seeking for team mates to build space 2.5D top view multiplayer deathmatch game. 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; – Realtimeboard.com, 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: andy.tyurin@gmail.com Thanks for reading, sorry for mistakes, I'm not native speaker. Hope you deals are going well, continue to have a nice day!
  4. 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: https://jsfiddle.net/hp4yn6kz/2/ 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.
  5. Pixi.js Showcase

    Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  6. https://zblip.itch.io/pixoji This is a hidden-picture puzzle game similar to nonograms, but with clues inside and outside the grid. It has 58 levels that gradually introduce new mechanics. Some levels will colour-in when you complete them. It uses pixi.js Let me know what you think! @ZBlipGames
  7. To The Capital II

    To The Capital II - is a game in the genre jRPG with classic turn-based battles in which you have to travel together with four heroes visiting many cities, dungeons, mysterious places and fight with various bosses. Storyline Prior to the overthrow of the current authorities and getting to the capital, Louis gets an assignment from the king to find fugitive participants in the failed coup. Together with Ralph, Bernard and Amelia joined by order of the command, they go on a journey through mysterious forests, snow-capped mountains and hot deserts. Official site: tothecapital.com We will be glad if you join us on Facebook www.facebook.com/tothecapital
  8. Ninja.io is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to ninja.io - Play as Guest - Enter any username and make sure it ends with _dev - Join CTF or Deathmatch. - Select primary and/or secondary weapon Press H to display table of controls. Decrease the size of the browser window in case it runs slow. I've noticed that some laptops and older systems have trouble maintaining adequate fps. It is currently not possible to register a username, but I've been making progress on an account and highscore system. The game server is currently located in Europe. I plan on running additional servers on other continents and for the site to serve as a gateway to the nearest game server when players join in order to minimize latency. Any thoughts, feedback or suggestions would be much appreciated! Thanks.
  9. Hi, first post and very new to PIXI! I'm trying to figure out how positioning works and how to do it properly. I have a few followup questions which I'll take later. Goal: Having a centered "mask area" where I can count the "unmasking progress" But first off; here is a fiddle. As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). The renderTextureSprite is not positioned and it results in only a corner being "unmasked" (clearly visible if I comment out the masking, it's positioned top left). If I position renderTextureSprite (fiddle) the same way as I've done with the sprites it works but then the brush/unmasking has some weird offset. 1. Is that the way to properly center the sprites etc or is it better to center the container instead? (like so: fiddle) or any other way? 2. When positioning, why does the mask have a weird offset? Fiddling around but not getting any wiser so help is greatly appriciated!
  10. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  11. Color Flow

    Hi, we just published our first game, Color Flow. http://www.kongregate.com/games/GravitonDigital/color-flow It's a fast-paced little arcade game, where you click or tap the colored drops. This will earn you gold, and flasks in different colors, that can be used to unlock more features and improve the score earned for each drop. Try to reach the top of the leaderboard, either in score or in drops collected in a single run. Please feel free to leave comments here, or on Kongregate where I uploaded the game. If there are bugs, missing features or any other discrepancies please let me know! I can't fix anything if I don't know what to fix Graviton Digital
  12. I'm fairly new to pixi.js and programming altogether. I am making a plugin that parses the xml save file of a sprite animation program and recreates the result in a game engine. The animation program uses bones for skeletal animations and the images (sprite parts) inherit the x, y, angle, scale_x, scale_y of the parent bone. The main idea would be to create sprites for the bones and the images, set up the bone inheritance to make the skeleton animation work correctly and then addChild the image sprites to the respective bone sprites. The only problem is that along with the aforementioned values, my image sprites also inherit the z_index of their container. The spriter does not limit the z hierarchy of the images to that of the parent bones, meaning that the user can change their z. I attempted to use worldTransform and worldAlpha for the parent bone values (keeping all the image sprites in a single container, thus controlling the z_index), but I am unable to get the parent bone's rotation. So, I either need to get all the values of the container and apply them correctly on the image sprites, or keep the image sprites inside the container and find a way to change their world z. Any suggestions would be appreciated and I thank you for your time.
  13. Hi, Suppose I have a sprite (say, a warrior), and then another sprite -- the warrior's shadow -- is added as a child as the warrior sprite; is it the case that if I click on the warrior's shadow, I am also clicking on the parent warrior sprite? Alternatively, is there a way to signify clicking on the child without clicking on the parent? I'm currently having trouble trying to do this. In this case, the sprites are adjacent to but not on top of each other. Thanks!
  14. Optimise code

    This is an extension of post : After hitting play on demo : https://preview.c9users.io/nafroman/bensvid/test.html and move the mouse you can see different screens and with up and down arrows zoom in and out but I am confused as how I can set the mouse so it doesnt go further past the video's bounds. I am wondering if anyone can take a look at my code and suggest any optimisations that can be done to make the playback better
  15. Game Developer

    Hi Everyone. I work for Cross Border Talents and we are a recruiting company, we have a client in Prague that is looking for candidates to relocate to develop games for casinos. They have the following requirements: JavaScript jQuerry HTML & CSS Google Closure Pixi.js Spine.js Canvas.js If you are interested in knowing more details don't hesitate to contact me via PM or jose.marques@cbtalents.com Best Regards, José Marques
  16. Welcome to the Pixi.js forum

    Hi everyone and welcome to the PIXI.js forum! First off, big thanks to @photonstorm for providing a place for people to talk Pixi, very kind of you sir! If you dont know what pixi.js is then let me give ya the low down: Pixi.js a fast, lightweight, open source 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It's the fastest HTML5 renderer in town! The idea behind pixi.js is that it can be used as the rendering component in your game engine (or any other type of project!) rather than as a game engine itself. Questions / bug reports / amazing feature ideas, or anything at all Pixi, then this is the place to discuss it! I will also be posting updates here as the engine grows and evolves. Pixi.js can be found here along with lots of examples: https://github.com/GoodBoyDigital/pixi.js To find out more about Pixi and read our beginners tutorial, check out our blog over on Goodboy
  17. Hi .i made a simple pixi app which tries to simulate spring forces but can't make it work properly . I've patched PIXI.ObservablePoint Object.assign(PIXI.ObservablePoint.prototype, { add: function(o) { this.set(this.x += o.x, this.y += o.y); }, radd: function(o) { return new PIXI.ObservablePoint(test, window, this.x + o.x, this.y + o.y);//test is a useless callback function that do nothing . }, sub: function(o) { this.set(this.x -= o.x, this.y -= o.y); }, rsub: function(o) { return new PIXI.ObservablePoint(test, window, this.x - o.x, this.y - o.y); }, mult: function(o) { this.x *= o; this.y *= o; }, rmult: function(o) { return new PIXI.ObservablePoint(test, window, this.x * o, this.y * o); }, getAngle() { //in radians return Math.atan2(this.y, this.x); }, getLenght() { return Math.hypot(this.x, this.y); }, setLength(l) { let angle = this.getAngle(); this.set(Math.cos(angle) * l, Math.sin(angle) * l); }, setAngle(a) { //in radians; this.set(Math.cos(a) * this.getLenght(), Math.sin(a) * this.getLenght()); } }); and this one is the sprite object class spring extends PIXI.Sprite { constructor(x, y) { super(); this.texture = new PIXI.Texture.fromImage("assets/image.png"); this.x = app.rw;//random width this.y = app.rh;//random height this.t = new PIXI.ObservablePoint(test,window,x,y); this.scale.set(.5 + Math.random() * .5); this.anchor.set(.5); this.friction=.9; } update() { this.d = this.t.rsub(this.position); this.d.mult(.1); this.vel.add(this.d); this.position.add(this.vel); this.vel.mult(this.friction); } } let arr = []; for (var a = 0; a < 100; a++) { let bu = new spring(app.rw, app.rh); container.addChild(bu); arr.push(bu); } app.ticker.add(() => { for (var i = 0; i < arr.length; i++) { let bu = arr[i]; bu.update(); } }); when i tried to create spring objects they behave weirdly . If there is only one spring object on array nothing happens unusual.But if there are more then one spring object they act like this and i can't change their positions independently beyond that if i disable friction they fastly disappear from screen .
  18. Error using pixi-sound (fs)

    Hello, I am using pixi-sound on a game with pixi.js and now I can't start my game because I get an error for the fs ERROR in ./node_modules/pixi-sound/dist/pixi-sound.es.min.js Module not found: Error: Can't resolve 'fs' in '/Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/dist' resolve 'fs' in '/Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/dist' Parsed request is a module using description file: /Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/package.json (relative path: ./dist) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/package.json (relative path: ./dist) I installed v2.0.0-alpha so on github told me that this version solve it. Do you know what might be? Thanks
  19. Pixi v5: WebGL 1 or 2?

    Simple question I think. For the next major release of Pixi, v5, which WebGL version will be implemented? Thanks!
  20. Hi, While I'm studying WebGL, I'm wondering how to use vertex shader with Pixi.js. Using fragment shaders is quite clear in my mind, but I'm still confused on how to send vertices coordinates to a vertex shader in Pixi.js. For instance, assuming we have such a vertex shader: // vertex shader attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } and we have such vertices coordinates: const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; How could I draw this triangle (this is supposed to be a triangle) with this vertex shader and Pixi.js? Thanks!
  21. DisplayObject.filters questions

    I have some questions about filters and how they behave in Pixi.js. 1. When settings filters on a display object like this: stage.filters = [filter1, filter2, filter3, filter4]; Is the order defined in the list is the same when rendered? 2. Does Pixi.js create brand new FrameBuffer Objects for each filter, or does it reuses the output of the previous filter as input for the next filter? Sorry if I'm not really clear or accurate since I'm not a WebGL expert ^^ Thanks for your insights
  22. Hi, I'm new to Pixi.js and the forums. I'm trying to figure out how to drag complex shapes made of polygons. I used PhysicsEditor to create the Polygons. I know a hitbox can be assigned to a sprite, but this seems to only work for a single simple polygon? So my next approach was to create a bunch of graphics shapes from the polygons and add them to a container. This works, but I don't know if it's the proper way to do it. Here is the code below. let polygons = new Polygons().getPolygons(); let container = new PIXI.Container(); polygons.forEach((data: any) => { var graphic = new PIXI.Graphics(); graphic.beginFill(0x00dd00, 1); graphic.drawPolygon(data.shape); graphic.endFill(); graphic.scale.x = scale; graphic.scale.y = scale; graphic.interactive = true; graphic.buttonMode = true; graphic.alpha = 0; container.addChild(graphic); graphic .on('pointerdown', this.onDragStart) .on('pointerup', this.onDragEnd) .on('pointerupoutside', this.onDragEnd) .on('pointermove', this.onDragMove); }); container.addChild(sprite); container.x = event.data.global.x - container.width / 2; container.y = event.data.global.y - container.height / 2; this.app.stage.addChild(container); } My mouse up creates the sprite by clicking on the screen. This is my Drag function. onDragMove = (event: any): void => { if (this.dragging) { console.log(event.currentTarget) event.currentTarget.parent.alpha = .5; let newPosition = event.data.global; let parent = event.currentTarget.parent; parent.x = newPosition.x - parent.width / 2; parent.y = newPosition.y - parent.height / 2; this.wasDragging = true; } } The weird thing with this code is that all my sprites jump on top of each other while dragging. If I use this exact same code for my onDragEnd function and comment out the onDragMove it works as expected, but obviously I can't see the drag happening. So my question is, is this the proper way to do this? If it is, why is the drag function not working? Is there a better way to do this?
  23. Pixi.js + TypeScript boilerplate

    After a couple of days working with Pixi.js, I've built up a simple boiler plate for the TypeScript language I'm glad to share: https://github.com/yahiko00/PixiProject The game loop with a FPS meter is already implemented. This boiler plate supports source maps, incremental builds, unit tests and browser auto-refresh. Maybe this could be helpful. Feel free to comment. There is certainly a room for improvement. Cheers!
  24. In the online documentation, I can read that the emitter's update() function require a delta parameter in seconds, (in bold): http://pixijs.github.io/pixi-particles/docs/PIXI.particles.Emitter.html#update But, as far as my experiments go, converting my frame time in seconds seems not to work. It does in milliseconds. Am I wrong somewhere?