All Activity

This stream auto-updates     

  1. Today
  2. @Thuan see my answer in your post
  3. Hi, the first that comes to my mind would be to create your own me.LevelEntity object, either by extending the default one or even just create your own, after all the default one is just quite basic and just switch to the level specified : https://github.com/melonjs/melonJS/blob/master/src/entity/level_entity.js
  4. Hi, welcome ! Definitely I would rewrite this part as this is a series of imbricated if else where at the end if a key is pressed the updated and collision check is never call/done. if left keypressed else if right keypressed else if jump keypressed else update/collision and you only wants to return the returned value of the update function.
  5. Yesterday
  6. it doesnt. pixi doesnt have culling mechanism inside. WebGL itself does - fragment shader is not called for stuff outside of framebuffer
  7. Ah, thanks! As for this, I actually figured out that the app.renderer does that automatically apparently.
  8. > So the better approach is to make the UI using HTML/CSS outside Pixi, for example in a different DIV? For prototyping - definitely yes, use the power of html. For real app on mobile phones - need performance testing
  9. You have to understand that without copy-background-texture hack that was in pixi-picture it is not possible for filter to affect background. Filter can affect only what lies inside container. .
  10. Unfortunately, its not easy. There are two ways. 1. wait when i move pixi-picture to v5. status: almost done, 3 months ago ., people are waiting by im very lazy. 2. copy displcament shader and add a mask inside. This demo has it: https://codesandbox.io/s/tender-franklin-iycmu
  11. Hello, I am hoping you can help. I am trying to apply a displacement map to a mask but everything I try either does nothing or applies the displacement to the mask and the masked image. I just want the mask to constantly ripple and animate leaving the image (or video) as normal. I’ve a CodePen of my progess with everything rippling. https://codepen.io/RicLeP/pen/JjGZzmO Pixi.js version 5.3.0. Thank you Ric
  12. Ah, I see. So the better approach is to make the UI using HTML/CSS outside Pixi, for example in a different DIV? And yeah, I already managed to make a working Viewport (by the position/pivot technique). If this is the case, then is there a way through pixi to make the stuff on the screen only render, or is it a longer process of me calculating it each frame on the gameloop and rendering to it? For more optimization. Thanks! And sorry for my many questions.
  13. No, its used with filters to show pixi that it doesnt have to calculate affected area and always should use full-screen extra framebuffer. > Other than that, for the UI I was thinking of creating a container, then setting its width and height to the app.screen's width and height, Bad idea. You see, pixi containers dont have width,height, those are calculated. They aren't like DOM div's. width/height actually sets SCALE. That thing came from flash, and it relies on fact that pixi and flash both DONT HAVE LAYOUT. AT ALL. its user problem. If we do it, then it'll be slow as heck. UI and world should be separate containers. world position has to be screen/2, world pivot equals to character coords in map. Basically you "pin" particular point on map to the center of screen.
  14. Thank you! That made it clear. That filterArea property is used to render stuff only in the screen of the player, for more optimization, right? So I can do app.stage.filterArea = app.renderer.screen, and it will make the stuff on the screen only render. Other than that, for the UI I was thinking of creating a container, then setting its width and height to the app.screen's width and height, and sticking/pivoting it to the player (who will be in the middle of the renderer screen). Is this a good approach or?
  15. Thanks a lot Ivan, I'm going to have to apologize for mentioning those"14 different backgrounds" because that was just a casual test to see how I can push limits of displaying things at once, but in the game things like this will never happen. I want to display just one background at once, and changing it depending on where the player is, when colliding with a door, the player gets sent to another map, the background changes, etc etc. Just like the usual prerendered/hand-illustrated style of games. In other words, what I wanted to ask for with my question was whether there are any serious pitfalls regarding this design of changing maps, whether I should clean them up at some point and such. I'm going to take notes of the things you mentioned though.
  16. Also its good for tricks like "container.filterArea = renderer.screen" - and filterArea wont have to be changed after resize Screen is just a rectangle that is updated on resize
  17. they are same unless you start messing with pixel density. Retina, modern phones, all that stuff. YES, for UI and all stage objects you should depend on "screen". That's why I introduced it , people were relying on "view" and it depends on pixel density.
  18. > 14 different backgrounds of 4096x4096 size at once 14 * 4096 * 4096 * 4 (RGBA32) = 896MB. * 4/3 because of mipmaps , 1194MB. You might remove mipmaps if you use special webgl2 textureStorage operation instead of regular texImage2D. Otherwise, even if you didnt enable them - memory will be reserved. because of webgl backend on top of directx. If you use compressed textures : DDS format (worsk on PC's) , PVRTC, ETC (ios, android) or even BASIS ( transcodes to all those formats, everywhere) - you'll get 1 byte per pixel As to how to load fast - well, if you use JPG browser stores JPG and decodes it to RGBA before its uploaded, then frees it when it wants. You may use the same approach and use BASIS / DDS with gzip!, and decompress them when needed Its not an easy task, yes.
  19. Hello there, first post! I'd like to ask one thing that was on my mind for a very long time throughout the course of my online multiplayer game's development. Imagine there is a large mansion and each distinct location/room of that mansion is a large JPG background image (2048x2048 or even 4096x4096 depending on room size, or along those dimensions), basically using a similar principle like what some games used prerendered backgrounds/illustrations for locations. I want to know if there are any serious issues with this approach memory-wise, and I'd like to know how I could optimize these gigantic maps, how to go about loading/unloading them, because for now I just use a variable in which I store a PIXI.Sprite for the background which changes its texture when entering another map. I also use the .from method rather than preloading. I haven't done any crazy tests except trying to load 14 different backgrounds of 4096x4096 size at once and display them on the stage just to test things for fun, to which I got 1500MB or so memory in Chrome task manager for the GPU process, but essentially I'd like to know whether there is something I should be aware of regarding any overhead from this. Characters/entities are done with skeletal animation, but I don't think it's really that relevant. To be clear, I want to make sure if I should free memory in some way when changing locations, and when I should free it, considering there will be probably dozens of rooms/locations of images of large sizes. Any help/insights are welcome.
  20. Thanks for replying, However, in addition to your post, I have played a bit with them, and I don't really see a difference between view and screen (I figured out that app.screen is the exact same as app.renderer.screen) But view (canvas) and screen both have the same Width and Height, (screen also starts at X = 0, and Y = 0, and I suppose the canvas too) So what's the real difference between both of them? For example, if I want to make the UI for my game, would I do it in Screen, considering it's the rectangle around the screen, or in the view?
  21. Hi I'm also new to melonJS and I stuck at the platform tutorial step 3, my sprite keep moving where he stands even tho i dont press the keyboard. And all the key left, right, up not working. Any ideas about this problem?
  22. I am testing this company now, shortly I will tell you how I am doing with them
  23. Hi, I'm new to melonJS and wanna make a new game project, so far Ive been following the tutorial on this site http://melonjs.github.io/tutorial-platformer/ until I reach the part about main character, the character appear but I can't make him move at all, the key binding to left or right doesn't seem to work. Hopefully someone can point out which I was doing wrong. Here is my built app.min js file: var game = { data: { score: 0 }, onload: function () { me.video.init(640, 480, { wrapper: 'screen', scale: 'auto', scaleMethod: 'flex-width' }) ? (me.audio.init('mp3,ogg'), me.loader.preload(game.resources, this.loaded.bind(this))) : alert('Your browser does not support HTML5 canvas.'); }, loaded: function () { me.state.set(me.state.PLAY, new game.PlayScreen()), me.pool.register('mainPlayer', game.PlayerEntity), me.input.bindKey(me.input.KEY.LEFT, 'left'), me.input.bindKey(me.input.KEY.RIGHT, 'right'), me.input.bindKey(me.input.KEY.X, 'jump', !0), me.input.bindKey(me.input.KEY.UP, 'jump', !0), me.input.bindKey(me.input.KEY.SPACE, 'jump', !0), me.state.change(me.state.PLAY); }, resources: [ { name: 'dst-inertexponent', type: 'audio', src: 'data/bgm/' }, { name: 'cling', type: 'audio', src: 'data/sfx/' }, { name: 'jump', type: 'audio', src: 'data/sfx/' }, { name: 'stomp', type: 'audio', src: 'data/sfx/' }, { name: 'area01_bkg0', type: 'image', src: 'data/img/area01_bkg0.png' }, { name: 'area01_bkg1', type: 'image', src: 'data/img/area01_bkg1.png' }, { name: 'title_screen', type: 'image', src: 'data/img/gui/title_screen.png' }, { name: 'area01_level_tiles', type: 'image', src: 'data/img/map/area01_level_tiles.png' }, { name: 'gripe_run_right', type: 'image', src: 'data/img/sprite/gripe_run_right.png' }, { name: 'spinning_coin_gold', type: 'image', src: 'data/img/sprite/spinning_coin_gold.png' }, { name: 'wheelie_right', type: 'image', src: 'data/img/sprite/wheelie_right.png' }, { name: 'area01', type: 'tmx', src: 'data/map/area01.json' }, { name: 'area01_level_tiles', type: 'tsx', src: 'data/map/area01_level_tiles.tsx' } ] }; (game.PlayerEntity = me.Entity.extend({ init: function (e, t, i) { me.Entity.prototype.init.apply(this, [e, t, i]), this.body.setMaxVelocity(3, 15), this.body.setFriction(0.4, 0), me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH, 0.4), (this.alwaysUpdate = !0), this.renderable.addAnimation('walk', [0, 1, 2, 3, 4, 5, 6, 7]), this.renderable.addAnimation('stand', [0]), this.renderable.setCurrentAnimation('stand'); }, update: function (e) { return ( me.input.isKeyPressed('left') ? (alert('move'), this.renderable.flipX(!0), (this.body.force.x = -this.body.maxVel.x), this.renderable.isCurrentAnimation('walk') || this.renderable.setCurrentAnimation('walk')) : me.input.isKeyPressed('right') ? (this.renderable.flipX(!1), (this.body.force.x = this.body.maxVel.x), this.renderable.isCurrentAnimation('walk') || this.renderable.setCurrentAnimation('walk')) : ((this.body.force.x = 0), this.renderable.setCurrentAnimation('stand')), me.input.isKeyPressed('jump') ? this.body.jumping || this.body.falling || (this.body.force.y = -this.body.maxVel.y) : (this.body.force.y = 0), this.body.update(e), me.collision.check(this), me.Entity.prototype.update.apply(this, [e]) || 0 !== this.body.vel.x || 0 !== this.body.vel.y ); }, onCollision: function (e, t) { return !0; } })), (game.HUD = game.HUD || {}), (game.HUD.Container = me.Container.extend({ init: function () { me.Container.prototype.init.apply(this), (this.isPersistent = !0), (this.floating = !0), (this.name = 'HUD'), this.addChild(new game.HUD.ScoreItem(5, 5)); } })), (game.HUD.ScoreItem = me.Renderable.extend({ init: function (e, t) { me.Renderable.prototype.init.apply(this, [e, t, 10, 10]), (this.score = -1); }, update: function () { return this.score !== game.data.score && ((this.score = game.data.score), !0); }, draw: function (e) {} })), (game.PlayScreen = me.Stage.extend({ onResetEvent: function () { me.levelDirector.loadLevel('area01'), (game.data.score = 0), (this.HUD = new game.HUD.Container()), me.game.world.addChild(this.HUD); }, onDestroyEvent: function () { me.game.world.removeChild(this.HUD); } })), (game.TitleScreen = me.Stage.extend({ onResetEvent: function () {}, onDestroyEvent: function () {} }));
  24. Greetings! I've very much enjoyed getting to know MelonJS, and had an initial question: for LevelEntity objects in TMX maps, I wanted to adjust the behavior —  The default is to trigger the level transition as soon as the play object even touches the Level object. I'd like (and might even suggest as default behavior) to have the level transition as soon as the Player object is mostly CONTAINED by the level object. This would make many of the transitions more natural. You'd be able to walk on to stairwells, doorways, or into other level switch regions. What is the best way to override the default? I tried a few things, including setting a custom LevelEntity to "me.collision.types.NO_OBJECT", but that disables the triggering. Thanks in advance for any help!
  25. Last week
  26. view is canvas, so "width" and "height" are in real pixels. screen is a rectangle, and according to CSS. new Renderer({width: 800, height: 600, resolution:2 , autoDensity:true}) makes a renderer with view of 1600x1200, but screen is still 800x600, and those numbers will apppear in "view.style.width="800px"" All your stage has to be adjusted to 800x600 size in this case, not 1600x1200. - this helps for Retina displays or when tab is zoomed, or on modern phones. Its rare when someone makes it right from first try As for app in general, here's explanation: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop . Application on itself doesnt have any magic, it just creates a few components and consists of number of getters.
  27. Hello, I've started learning Pixi not so long ago, and everything seems to be going well so far, whenever I get stuck I consult the docs or the past posts. But these few terms actually confuse me a lot, app.renderer, app.renderer.view, app.screen, app.renderer.screen In this case I'm using app as the constant for the PIXI.Application. Can someone tell me what's the direct difference between those terms, and if there are others related/similar to them too that I should be aware of? Thanks in advance.
  1. Load more activity