All Activity

This stream auto-updates     

  1. Past hour
  2. List of few alternatives (that are used by PacpGames) is at https://www.pacogames.com/blog/pacogames-and-games-distribution-services
  3. Today
  4. No one answered in a day? Its possible that you'll have to wait even more. Maybe actually debug where exactly that even is spawned? Also, particle container + interaction probably wont work, it has limitations , it doesnt update transforms. Without hacking interaction, making your own "containsPoint" for big objects collections I doubt you can get what you want
  5. Hello and welcome to the forums! The best way to figure it out is to understand what lies underneath: "app.screen" aka "renderer.screen", transforms, position/pivot (position global is pivot local) and other basic things in pixi. People who cant get what they want with viewport, has to get lower and debug it. Sometimes you even have to write and draw something on paper! Experience with working on rectangles and transforms helps a lot. At the least, that's what you can do while waiting for concrete answer about pixi-viewport model from someone who used it
  6. Yesterday
  7. Hi all, I'm embarking on making a simple game that involves having a map. I want the player to be able to zoom in and out and drag around the map and select things. I after a quick look at various frameworks it seemed Pixi was a good fit so I went with that. When looking at how to handle the zoom and drag I found pixi-viewport. I have managed to get my map to display, identify what was clicked (and the map - co-ordinates). There are two things I can't get working but I am struggling to find examples of working code or indepth writeups/instructions that I can use to work out what I am doing wrong. What I am trying to do Good enough result: when the game starts the viewport center is the player. The zoom is set to fill the application window. If zoomed out you can't move the map out of the application window. Perfect result: when the user drags around the map it stops at the edge of the visible area so you can't drag the map out of the viewport. When the user zooms out the zoom stops when it will be smaller than the application window and, if close to the edge recenters so that you never see the application backgrounr. When the browser window resizes everything adjusts. The two issues I am having to get there are: Bounce When I add ".bounce" to my viewport it does not do what I expect which is to keep the map in the viewport. I have tried various sizes for the application and viewport settings but can't seem to get it right. moveCenter When I try to use moveCenter my map end up with the 'center' point somewhere near the bottom right of my application window. fitWorld() works but fitWidth makes my map disappear entirely and I can't even work out where it went. I think both issues relate to my limited understanding of what these variables actually mean and how they interact with the PIXI application size. I've looked at the pixi-viewport api but I can't work it out. screenHeight screenWidth screenWorldHeight screenWorldWidth worldHeight worldWidth worldScreenHeight worldScreenWidth I'd really appreciate it if someone can point me in the right direction. Thanks!
  8. Hi so i cant seem to figure out how to calculate the mouse position relative to randomly created sprites in a particle container so I can create a attraction or repulsion effect when the mouse cursor gets close to the particle. If someone could help that would be greatly appreciated. The general method im trying to implement but not working is below. creating random x/y cords with this function: function rand(min, max) { if (max == null) { max = min; min = 0; } if (min > max) { var tmp = min; min = max; max = tmp; } return min + (max - min) * Math.random(); } Then trying to create the sprites and calc the mouse coordinates/sprite coordintaes: stars = []; for (var i = 0; i < totalStars; i++) { var star = new Sprite(id["star.png"]); star.interactive = true; // enable mouse and touch events star.buttonMode = true; // show hand cursor on mouseover star.scale.set(rand(0.05, .07)); star.anchor.set(.5); star.x = rand(vWidth / 2, vWidth / -2); star.y = rand(vHeight / 2, vHeight / -2); stars.push(star); spriteParticles.addChild(star); function calculateStarPosition(){ // mouse coordinates let mouseCoords = app.renderer.plugins.interaction.mouse.global; let starCenterPosition = new PIXI.Point( star.x + (star.width * 0.5), star.y + (star.height * 0.5), ); let toMouseDirection = new PIXI.Point( mouseCoords.x - starCenterPosition.x, mouseCoords.y - starCenterPosition.y, ); let distance = distanceBetweenTwoPoints(mouseCoords, star.position) // Use the above to figure out the angle that direction has const angleToMouse = Math.atan2( toMouseDirection.y, toMouseDirection.x, ); /* var starpos = { left: star.x, top: star.y }; */ var radius = 5; if(distance < radius){ radius = distance; // TweenMax.to(sign, 0.3, {scale: 2}); gsap.to(star, {pixi:{scale: "+=.1"}, duration:0.3,}); } else{ // TweenMax.to(sign, 0.3, {scale: 1}); gsap.to(star, {pixi:{scale: .1}, duration:0.3}); } gsap.to(star, {pixi:{ x: Math.cos(angleToMouse) * radius, y: Math.sin(angleToMouse) * radius }}); } }
  9. @khleug35 thanks that was very useful for me
  10. Here's a free book for those interested in or looking to start using TypeScript to make Phaser 3 games. It goes through 11 chapters and about 90 pages to make an Infinite Runner game like Jetpack Joyride. It is intended for those slightly more advanced than beginner. I also wrote the free Infinite Jumper in Phaser 3 with Modern JavaScript book that is geared towards beginners! TypeScript tends to help add more safety and clarity to your code by default so that you can make bigger and more complex games. We cover things including enums, basic state machine, infinite scrolling, object pools, and more! Learn more and get the book here: https://ourcade.co/books/infinite-runner-phaser3
  11. Yes, i found a solution to the original thread's problem. To make a sprite "ignore" the camera's zoom, you just scale it by 1 / zoom. It will stay of the same size, regardless of the zoom level of the camera. Keep in mind though that this actually makes the sprite bigger when you zoom out and smaller when you zoom in, so it could potentially mess up your game's mechanics. sprite.setScale( 1 / game.camera.zoom, 1 / game.camera.zoom );
  12. Last week
  13. I am trying with the Particles Container. Any idea why I get : Some PIXI event get a null error but I dont know where its coming from. https://codesandbox.io/s/zen-flower-5q09u?file=/src/App.vue
  14. Seems cool i will do my best and update u later :]
  15. In case textures take too much memory, you can try use texture with only one channel (LUMINANCE format) and make a shader for your chunk that will produce color based on the value (basically, storing palette somewhere, maybe in texture) how to make basic mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js Color-Map filter, might be good for taking some code for shader, it has palette: https://github.com/pixijs/pixi-filters/blob/master/filters/color-map/src/color-map.frag , see the example in the plugin
  16. Yes, in your case packing rects might be a good idea
  17. > The drawing is fast enough now after changing some bad code why not just put those things in a texture? You cant directly access texture pixels but you can ask it to update from your buffer colorz = new Uint32Array(4*width*height); colorz[0] = 255;//first R; colorz[1] = 255;//first R; colorz[2] = 255;//first R; colorz[3] = 255;//first G; const myTex = Texture.from(colorz, { width: width, height:height }); colorz[index] = ... myTex.update(); and use that texture in sprite the downside is of course the texImage2D that uploads array to videomem, but if you have only a several chunks updating per tick, it should be fine. Otherwise you might create a queue which chunks have to be updated and update several of them in one frame to understand limitations of pixi you can go through https://webglfundamentals.org/ . we dont have pixi version of it, but pixi uses all those things in its low-level. If you think in webgl terms, its easy to convert them to pixi and estimate what exactly is going on. Also one of basic debug tricks - use SpectorJS to capture one single frame and you'll see what is happening inside it
  18. Its usual double-pixi-in-node_modules-problem remove node_modules remove package.lock npm install everything again
  19. Hi, I updated PIXI from 5.2.1 to 5.2.4. I got an error on spritesheet loading, using PIXI.Loader.shared . Variable texture is instance of Texture that stored in "@pixi/app/node_modules/@pixi/core/lib/core.es.js" module, while here we checking it with Texture that stored in "@pixi/loaders/node_modules/@pixi/core/lib/core.es.js" module. How can I fix it?
  20. There are engines and there are separate libs that you can build your own engine on. Engines/frameworks usually mean that there's dependency injection somewhere, most of your objects are being tracked by not-obvious systems. Libs just give you better abstraction and basic implementations of doing sound, graphics or inputs, physics or inputs
  21. Hello everyone! I have a question. At the university, the theme of the term paper "interactive visualization of physical processes" requires consideration of various tools for creating games in html5. described all the pros and cons of the engines. Can you tell me which engines are worth taking for consideration? and which one is better to choose. consider required and paid and open sourse. but you can use it only for free. Well, the optional addition of sound and 3d is desirable, but this is not necessary.
  22. The drawing is fast enough now after changing some bad code :] i don't need help anymore thank you anyways 😄
  23. How can I do if I using Particle Container to make each sprite interactive ? Because it doesn't work now Edit: I read this : But How can display 250000 sprite and make it interactive at same time ?
  24. Okay, thank you :] it draws only visible chunks so its not that hard i guess! i made it kinda faster by using faster bilinear interpolation (calculate edge values and use this values to calculate other pixels values faster). im making rn a simple search algo that find rectangles with the same color and draw them instead of drawing it pixel by pixel :] im not sure you understand what i want exactly i want accelerate drawing the map by using webgl if possible bc drawing using fragementshader is pretty fast but it keep drawing it again and again every frame , i will maybe use fragementshader to draw chunks incase i add some animations like water level changing!
  25. Hi, I'm Tim, I'm a Concept Artist / 2D Artist I design characters, weapons, and objects I work in many styles and in many settings I can use 3D, photobash and matte paint in my work learned programs: Adobe Photoshop, Blender, Marvelous Designer, KeyShot. Write to me in the mail Portfolio: https://www.artstation.com/rattle mail: timkrovopusk@gmail.com
  26. Did you try to profile it with devtools? Look at which functions consume the most time. I think its because its re-calculating bounds of all those graphics objects on screen. Btw why are you using graphics for tiles? You can try Sprites with PIXI.Texture.WHITE and "sprite.tint" that you want, it'll be faster for interaction in your case, but still very heavy because interaction will iterate and check every item. There's no quadtree in pixi, so its your job to provide InteractionManager with better search algorithm
  27. Hi, I have this code who lag when I drag it for navigate in the map. Same for zooming with the mouse wheel. What's the best way to avoid it ? https://codesandbox.io/s/sad-firefly-hgjnu Thanks
  1. Load more activity