Popular Content

Showing content with the highest reputation since 01/28/20 in all areas

  1. 3 points

    Google GameSnacks

    https://www.gamesnacks.com "Bite-sized HTML5 games, accessible to everyone." https://www.gamasutra.com/view/news/358551/Google_wants_to_bring_HTML5_titles_to_lowend_devices_with_GameSnacks.php "Google has announced a new HTML5 platform called GameSnacks that's designed to help devs bring quick, casual games to any device."
  2. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  3. 2 points

    The future of web games

    HTML5 is growing wildly in China as many games were placed on hold during the new regulations last year. More and more developers started to build games using the WeChat environment which we helped build that works off the HTML5 library. So many developers were building and continue to build games for that and now other phone companies like Oppo, Samsung, vivo, Huawei, Xiaomi, and others are building mini app marketplaces that work perfectly with HTML5. With 5G also coming, speeds are at a point in some countries that downloading a game will be as fast as opening a native app. I think we are on the edge of something great. So don't be worried for the future.
  4. 2 points

    Pixi.js Showcase

    How to make pixi.js game with webpack step by step. The tutorial is focus on how to build development environment from initizlize the project to publish the project. the tutorial is here https://github.com/proudcat/pixi-webpack-demo , welcome to star.
  5. 2 points

    make jigsaw game with webpack

    tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  6. 2 points

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  7. 1 point
    Use "new BaseTexture(imageBitmap)" in latest pixi (5.1 or 5.2) . Or directly "new BaseTexture(new PIXI.resources.ImageBitmapResource(imageBitmap))"
  8. 1 point
    Hello. I have problem with dynamic change sprites texture. So the flow of the app is: I have two containers which overlap themselves. On the bottom I have container with one quite big image (6283x1024, 1MB) and on the top I have container for same image but tiled. Into the top container I put tiles (1024x1024, 100 - 300 KB) in a better quality. When app starts at the beginning I put only image for the bottom container in one sprite and prepare structure for the top(tiled) container - sprites without texture but with proper width/height/x pos/y pos. While sliding image (left or right) I detect which sprites from the top tiled container are visible on the screen and for those which are, I download images and replace textures. If all textures are loaded for the tiled container then I hide the underneath container and display tiled image in high quality. Tiled container has higher z-index then the second container, to make the image consistent while tiles are being downloaded. I have also slider service which uses ticker for auto-slide (left / right). The problem is that, when I replace textures I have lags and fps drops - from 60 to ~20-30. Is there a way to keep proper fps while replacing textures and keep the slide smooth without lags? Some code which belongs to my custom sprite class which extends Sprite class: // Detect if the sprite is on the screen isOnTheScreen(): boolean { const globalPosition: Point = this.getGlobalPosition(); return globalPosition.x + this.width > 0 && globalPosition.x < window.innerWidth; } // load it load(): void { if (this.isLoaded) { return; } this.isLoaded = true; this.loaderService.load$(this.source).subscribe((resources) => { const texture: Texture = resources[this.source].texture; this.canvasService.app.renderer.plugins.prepare.upload(texture, () => { this.texture = texture; }); }, // ToDo: error handling, perhaps retry downloading tiles once again. () => { this.isLoaded = false; }, () => { this.event$.unsubscribe(); }, ); } // event which says if we slide the image or do any other interaction setEventSubject(event$: Subject<boolean>) { this.event$ = event$.subscribe((detect: boolean) => { if (detect && this.isOnTheScreen()) { this.load(); } }); } // Slider service // ticker code which is in slider service this.ticker.add((delta) => { nextX = this.imageService.position.x - 5 * Math.round(delta); this.imageService.updatePositionX(nextX); this.canvasService.moveSprites(); // the event which goes to each sprite to start detection if they are visible on the screen this.canvasService.interactionEventTrigger$.next(true); }
  9. 1 point
    Hello, and welcome to the forums! Looks like a general JS problem. Someone will help you with code, I'm sure My two bits: 1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option 2. store images in array, store current image in a variable. 3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is. 4. Usually people use tweens for that kind of stuff. Praise GSAP ( https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js , google GSAP) . Its totally fine to write on your own first, because you need to understand how such things work.
  10. 1 point
    Best way is "stage.removeChildren()" but you might need some extra stuff if you want to manage your Texts differently or Textures - destroying texts is a problem because... well.. i dont have time to explain, here's one of those threads, you can search more: https://github.com/pixijs/pixi.js/pull/6427 Read up removeChildren() code anyway. If you use destroy() of all children , do it with backwards iteration, that way you wont trigger the problem you encountered. Or copy the array of children before you iterate through it.
  11. 1 point

    Sprite from buffer

    I am not asking for it. There are probably more important things for the team to work on!
  12. 1 point

    input element z-Index in pixi.js

    You're welcome. If you need to combine those two inside of pixi stage, you'll have to write your own pure pixi input unfortunatelly
  13. 1 point

    How do you keep the size below 3MB

    Not so long ago games needed to fit on a floppy disk ...so 3MB is a luxury imo To keep things small consider these easy wins. Javascript minification and dead-code removal. Lower bitrates for audio (combined with shorter duration and more imaginative looping). Pngquanting (8bit) bitmaps whenever possible. Keep every asset pristine, making every byte count. Example: https://b10b.com/grandprixhero/ (2.9MB total) And 3MB is by no means a hard-edged requirement, it's a recommendation based on FB's observations of their audience. If you can achieve it then the game may get more exposure and higher retention, but heavier games can still be viable too. What's most important for FB IG is virality and social connection.
  14. 1 point
    space.game Welcome to our open Alpha of space.game! We'll be constantly updating the game and will be adding new features such as online multiplayer, new game modes, accounts, friends, leaderboards, store, and more! Game Description Claim as much territory as you can by strategically flying your spaceship around the map. You’re invincible while inside your territory and can kill anyone entering your space. Outside of your territory, other players can hit your trail and destroy your spaceship. If you hit another player’s trail, you’ll destroy their spaceship. A head to head collision results in both spaceships being destroyed.
  15. 1 point
    Like it. Very charming, juicy neon graphics.
  16. 1 point

    on events not working on sprite

    asset.interactive = true; Rather than your setInteractive property
  17. 1 point
    Sup guys: Just trying to make a server side 3D image for my website. I want it to look just as good as the 3D images on FaceBook. I know how to make depth maps properly, I just need the code to add it to my own site. You can see a bad example using Pixi code below. Just scroll down to where it says "demo" near the bottom of the page, and scroll over the picture for the effect. This is what I want, but it has to look good, like the 3D images you see on FaceBook: Demo I know Pixi code can help me, I'm just not that smart to know how to use it. Hope someone can help. Thx. -el
  18. 1 point

    Platformowka - retro platformer

    Hi all! I made a simple platformer, a hobby project done in free time. It is a HTML5 port of a game I made in Pascal as a teenager over 20 years ago. I improved a lot of things in terms of game mechanics, level design, etc. but the graphics are all original - hand drawn in MSPaint somewhere around 1998 I have a bit of nostalgia for this game and I can find some charm in its style but probably the reality is that it just looks ugly. I would like to get some feedback whether it's playable nevertheless, what can be improved and whether the graphics disqualifies it or not. The game has 4 levels, difficulty gradually increases with later levels. It works on both mobile and desktop - on desktop it's easier to play as you can use the keyboard to control rather than touch. I can beat it on a mobile phone without problems but I played it a lot during playtesting so got used to the controls. It's coded from scratch and uses pixijs for drawing. It's my first complete HTML5 game, I hope someone will enjoy it Here is the link: http://platformowka.pl
  19. 1 point
    I see you've tried many things 1. re-creating TextureSystem second time 2. resetting the renderer state, binding/unbinding resource to baesTexture 3. binding/unbinding resource to baseTexture on every upload Unfortunately, that all should not affect behaviour. I dont know what is wrong with your case, I dont actually have websocket server with a video locally. Even without video, I dont know what is supposed result of that demo and what you see is wrong with it. Can you provide more information? I'm sure I can fix that and make your code much smaller if I at least see the bug with my eyes However, you use pixi 5.2.0 - maybe 5.2.1 or dev version ( pixijs.download/dev/pixi.js ) will work better, I remember we fixed something related to texture bind
  20. 1 point
    Thank for answer again! Actually, I try to make video yuv to rgb in pixi.texture. After decoded video data bind to three textures(yTexture, uTexture, vTexture), pixi.shader trans to rgb values in pixi.geometry, when video decoded data keep coming, that need to update textures(yTexture, uTexture, vTexture). It's ok that run only one yuv to rgb geometry in canvas, but add other sprite, the textures confuse problem happened. attach demo code. pixi_YUVRGB_demo.zip
  21. 1 point

    Offroad Mania — free keys for feedback

    I played the browser version and thought it was so good and pure I checked out the steam and the price I felt was also very fair so i had to buy it for myself to support the project. Would it be possible at all to play it on my iPad? Good luck with the recent launch!
  22. 1 point
    Hello everyone, in late 2013 I started experimenting with what is possible using JavaScript/WebGL (coming from a computer engineering - C++/Java university background). Over time it grew into a game engine and then this game, as I worked on it in my free time next to full time jobs and more recently, contracting work. So it is entirely custom code (the only library used is RequireJS to load the JS files themselves), and I made all the assets as well (models, textures, music, sound effects (using some free CC licensed sound samples as a base) - you can find details in the "About" page in the game. As a result, the engine features and asset quality are rather modest. It is still heavily work in progress as the title suggests, but it has become quite playable recently, so I decided to share it here. About the game My goal is to create a fully fledged 3D space sim with procedurally generated missions that can be played on any computer with a modern browser. I am going for more of a softcore sim feel rather than an arcade one (there are many arcade options these days, but I prefer the more serious, elaborate controls of sims, without the time/hardware investment needed for something like Elite: Dangerous - which also doesn't run on my linux machine) Check out the facebook page, where I post updates and you can also find a recent gameplay teaser video. Game features (so far): full 3D, 6 degrees of freedom gameplay Newtonian physics (with flight assist) basic combat mechanics (primary weapons, shields, flight modes, targeting) 11 simple, authored missions (+3 training missions) against AI in-game database with info about the ships detailed, persistent graphics and control settings graphics settings automatically lowered if default settings are not supported by the hardware (high FPS is not ensured, only that it runs) joystick support an editor to mod the game (even more WIP/unstable than the game) Planned (missing :)) features: procedural missions, with ship upgrades in-between advanced combat mechanics (missiles, jamming, boosting, communication with wingmen) more content (ships, weapons, more detailed environments....) multiplayer Also a lot of polish, HUD changes, performance optimizations etc are planned. You can get a general idea by checking out the issues page of the game's github. Please note! The download size for the game can be significant (tens of MBs - depends on graphics settings and the mission being loaded), so I do not recommend trying it with a plan where you pay based on the amount of data! Play it here Let me know what you think! Technical info You can check out the code at https://github.com/nkrisztian89/interstellar-armada. Feel free to fork it - since it is 100% client side code, you can just throw it into the public HTML folder of your server (e.g. Apache) and it should work locally right away. Then you can use the built-in editor in the tools folder (localhost/the_folder_you_put_the_game/tools) to see how the game data files are organized, play with them (to apply the changes just hit export and then overwrite the original with the exported file in the data folder). Note that you cannot create or export missions or edit config/settings from the editor (as of now) Since this is a long project and I regularly revisit and update parts of the codebase that I might have not touched for a year or so, I try to keep it organized and nicely commented even if just for myself. However, this is not the number one priority, so there are parts of the codebase (which at this point grew above 60,000 lines) which are in terrible, terrible shape. I believe the best example of this currently is the code for the HUD.
  23. 1 point
    Hello! PixiJS binds textures automatically, you put a link to texture in shader uniform - and it'll work: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js However, you want to upload texture for yourself. In that case you can use our texture resource API: https://pixijs.io/examples/#/textures/gradient-resource.js You dont need to create gltexture nor to bind it. Just call texImage2D inside "upload" method. As for texture params, you can either set them in baseTexture wrapMode/scaleMode, either override "style" method of resource, it has the same signature as upload. If you worried that PixiJS operations wont be optimal, you can snoop them through https://spector.babylonjs.com/ and see that texture params are exactly the same. Welcome to the forums!
  24. 1 point
    Is there any built in system that would pass on attributes and properties to children for example inside of a container? A bit like how html works if you have an element inside another, and for example make the element w 50, h 50, position: abs, right: 0, top: 0, the properties gets passed on to the children etc etc, i could make this myself but it would save some time if there already was something for it.
  25. 1 point
    FYI, see here : https://github.com/melonjs/melonJS/issues/982
  26. 1 point
    Hi! Welcome to the forums Your question is general and can't be answered in a few sentences. To understand which one is better for your particular case - you have to spend a year or two with webgl libs. Basically, 1. Batcher does care about graphics with small number of vertices. Circles usually have big number. 2. In case if graphics does not fit into batcher, all transforms are cheap anyways - position,scale,rotation - its all just one matrix in webgl uniform, it does not modify geometry buffer inside graphics. 3. in case you have 10k elements that are rarely move - you divide it by 100 graphics and update only those graphics that have moving parts. That way you upload minimal number of buffer. What is Batcher? What is Transform? Cant we just make faster Graphics? Is there a plugin for it? What is buffer, does it have pixels or something else? Is graphics rendered only one time if you dont move it? - Those questions I wont answer. Those things will make sense for you only if you learn 1. webgl fundamentals : https://webgl2fundamentals.org/ 2. all basic pixijs tree examples, how do you work with transforms. 3. how meshes/graphics in pixijs works, read the library sources. 4. maybe read what other people asking here and in https://github.com/pixijs/pixi.js/ 5. experiment with threeJS. Just so you know that we aren't pulling your leg explaining that its all is difficult. PixiJS is not optimallfor your task. Its never optimal. Its just faster than other renderers for 2d and has many general optimizations. You need to tune both your high-level algos and configure pixijs low-level. But first , you need to actually hit the performance problem, there's no point int premature optimization of pixijs app, unless you know that you will hit a particular bottleneck.
  27. 1 point
    nice! it works well. thank you for your help.
  28. 1 point
    @Zygomatic Thank you!!! I have plans to add +50 Levels... With some extras... like stars for score, enemies and more. Don't hesitate to contact me anytime!
  29. 1 point

    background downloader for pixi.js

    There's an example here: https://github.com/kittykatattack/learningPixi#loading
  30. 1 point
    Oh i mean resource-loader v3 its this one: https://github.com/englercj/resource-loader/tree/8c27956c2ee68e5190e489d87a3e641df035116b
  31. 1 point

    Multi-Style text

    Working great. Thank you.
  32. 1 point
    Hi, I'm the one who made that example. Here's a short description on how it works. The text uses only one reel as an example as all the others function in the same way: Let's say we have a position where the reel is (reel.position). This position is increased on each frame. Then each sprite is positioned based on that position. When the symbol is detected to be back to start, a new symboltexture is randomized to it.
  33. 1 point
    Hi! I'm looking to start with Pixi, and i thought it would be fun to look if i can play around with the Slots from the Examples . Now when i look at the code provided i think i understand de part where the 5 reels are build and filled with 4 random symbols each. The part i don't understand is how it works when spinning the slots it looks like the reels are filled with infinite random symbols. Can someone explain to me in wat part of the code this effect is happening? Code can be found here: https://pixijs.io/examples/#/demos-advanced/slots.js Luffy
  34. 1 point
    Hello All -- Looking forward to learning a lot from the people on these forums! How can I get the following to work? I am trying to get a container to rotate around it's center, much like is seen here: http://scottmcdonnell.github.io/pixi-examples/index.html?s=basics&f=container-pivot.js&title=Container Pivot However, I can't seem to figure out the math behind placing the container on the screen and then the amount that you must offset it in order to have the pivot rotate in the center. My setup is I have a screen with width: 1536 and height: 722 I have a container with width: 384 and height: 361 I have centered the container in the center by using the following: container.position.x = 576; container.position.y = 180.5; I tried to then set my pivot with the following: container.pivot.set(384 / 2, 361 / 2); My thinking that the local center of the container would be half of its width and half of its height, but then this repositions the container and it is no longer centered. My animate function is as follows FYI: app.ticker.add(animate); let delta = 0; function animate() { delta += 0.1; container.rotation += 0.01; }
  35. 1 point
    IF you just created container, it does have width and height 0, because it doesnt have children. Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development. If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.
  36. 1 point

    Fastest way to do masking?

    Also you can use https://spector.babylonjs.com/ to capture one frame and see how exactly masks are handled. Again, I remind you - it might be different for pixi 5.1 and 5.2. There might be bugs.
  37. 1 point
    Jonny Shaw

    Fastest way to do masking?

    Sorry to bump this but just wondered if this had improved significantly with V5, or an alternative approach is recommended? I noticed that masks seem to act slightly differently in V5 someway in their stacking order. A system I had set up in V4 for instance with a Kawase blur filter on a masked container that animated. The filter would also blur the mask (which was the intended idea) but with V5 only the contents of the container were masked. Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. Because the graphics arent working on mobile two approaches I thought of... 1. Rendering all the graphics to a single texture on the fly and having that texture used as a single sprite mask. 2. Just switching the masks up for simple sprites and keeping the rest as is with 5 masks? Is there any benefit on draw calls for instance if I had to mix 1 with 2, ie having one rendered texture but using it as 5 masks as opposed to 5 separate images for the masks? Also was interested to see what @cursedcoder mentioned about pixi-heaven - is this still applicable with V5 as I understand pixi-heaven still needs a bit of work with 5?
  38. 1 point

    Change background image

    Hello, Im trying to change the background image of a game built using pixijs. Im just wondering what is the best way to do it ?. Currently im using the below method but the problem is i have to redraw all the other child elements after i change the background. Thank you const parent = app.view.parentNode; var imagePath = "images/"+image; var landscapeTexture = PIXI.Texture.fromImage(imagePath); var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 0, parent.clientWidth, parent.clientHeight)); background = new PIXI.Sprite(texture2); app.stage.addChild(background)
  39. 1 point
    Hi, i am curious what is best way to make collision. At this moment I make it this way: i have all elements with collision in an array and i iterate through it and calculate distance this way: let dx = this._enemies[i].cords.x - this._players[y].cords.x; let dy = this._enemies[i].cords.y - this._players[y].cords.y; let distance = Math.sqrt(dx * dx + dy * dy); if(distance < 100) { //collision } This calculations make a sphere. We can do it this way to get a square or rectangle: if(Math.abs(sprite1.x - sprite2.x) < 100 && Math.abs(sprite1.y - sprite2.y) < 10) { //collison } I think this is not the best method, because lets imagine we have 1000 things with collision. We have to calculate their distance 1000x1000 = 1000000 times per frame. My second thought is a 2d array that pretends to be map. If object is on x=200 and y=200 we can assign it like this map[200][200] = 1. And then another object check is that place is free (there will be 0 then). Its good when the object is 1 pixel wide and high. For larger objects it could be harder to implement. How are you doing this?
  40. 1 point
    Now I won't even have to change the time I can just catch the request... Slightly more trouble upfront (fake the nameserver, serve response), but then I can really get going. But I guess it would prevent the average user from cheating. Couldn't you just save the last used time, and see if it magically decreases... The user is going to corrrect the time again, and if they start up the game, just remove the bonus?
  41. 1 point
    @gogoprog have help me to solved this problem. And this topic is closed. Thanks everyone.
  42. 1 point
    Here for you if(resource.extension === "mp4") { const texture = PIXI.Texture.from(resource.url); const videoSprite = new PIXI.Sprite( texture ); /**@type {HTMLVideoElement}*/ const videoControler = videoSprite.texture.baseTexture.source; videoControler.currentTime = 0; //jump to 0 will also autostart videoControler.onplay = function() { //TRIM VIDEO after loading or onplay videoSprite.texture.trim = new PIXI.Rectangle(0,0,400,400); videoSprite.texture.frame = new PIXI.Rectangle(0,0,400,400); }; app.stage.addChild(videoSprite); } Don't ask me why but you need do the thing async ! or pixi going crazy with gl error. So perform this inside on start. I can't investigate more because you don't join me a `launch.json` for debug in IDE.
  43. 1 point
    "graphics.parent" Or do you not have link to graphics itself from event listener body?
  44. 1 point
  45. 1 point

    custome Event for pixi

    add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.
  46. 1 point

    collision in js + three.js

    I read in this article Real Time Multiplayer in HTML5 that we should to create a fixed physics loop on server and on a client. Server should have high frequency loop for physics and low frequency loop for sending messages to clients. I upload the example from the article on the free Heroku hosting https://battle-world.herokuapp.com/?debug You can run it in two browser windows. Free hosting has limits. If no one runs the application 30 minutes the server will sleep until someone wake up it. To wake up server you need to wait 10-15 seconds.
  47. 1 point

    Tween inside mouseover event

    var tween = (undefined).add({ targets: heart, alpha: { value: 0, duration: 3000, delay:2000}, });
  48. 1 point

    How to destroy scenes

    Is there a way to destroy a scene and all of it's dependancies? I would like to create a 3D scene that would act as a launching pad to load other scenes. Then be able to go back to the launch pad scene to choose another one, but would first like to clean up the current scene to free up memory. It's important that we stay within the same BABYLON.Engine object. I hope that makes sense. Any thoughts about this approach? Thanks in advance!
  49. 1 point
    Hi there, We are trying to make a very innovating web game and we are seeking developers or a team to create our game. We are not yet decided on frameworks or any technologies. Although we are very interested in HTML5 & no flash. This game will be very social media integrated. Here would be a sample but just much more creative.... http://www.lunarcafe.com/fun-games/3-card-tarot-reading-free If you believe you can help, Please email me at: Arian.y@pacificmez.com Thank you
  50. 1 point
    always have to laugh when i read something like that, 98% of the games that pop out somewhere every year are somehow clones, not exactly 100% clones but they take ideas from existing games here and there i once read a article called "steal like an artist", its all about getting inspired by others if you can manage to create an unique game that dont remind you of another one then do it, but be sure you can make it quick and you can sell it and its really unique :> as for html5 games, to make a living out of it and ensure it works on most mobile devices i prefer simple games, concepts that work and lovely details you add to make it a bit better and bit more unique