Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation since 04/22/20 in all areas

  1. Here’s a work-in-progress of Phaser 3 examples in TypeScript: https://examples.ourcade.co/phaser3-typescript You can make changes in the editor with code complete, static analysis, and more and then test it immediately in the browser. Right now, I am taking the official Phaser 3 examples and turning them into TypeScript with a more modern format. You can also get the examples as a Github repository without the website frontend: https://github.com/ourcade/phaser3-typescript-examples Hope this helps make it easier for people comfortable with webdev or any other dev but new to
    5 points
  2. wincent95

    Pixi.js Showcase

    I built this website that was projected on to a transparent touchscreen for an exhibition at Museum of Science and Technology in Stockholm, Sweden. It might be hard to see in the video but visitors are challenged with a range of ethical questions about technical and medical development at three of these stations. I mainly used Pixi for all the great filters like Pixelate and CRT. It really worked out great! The whole project took 1 month from the first line of code till the premiere. Just when the exhibition launched, the museum closed due to covid-19. Fortunately it’s going to be ar
    4 points
  3. After a few years break from creating the Point and Click game Bayou Island, I've decided to make a new game called "The Halloween Game" in time for the holidays. It also has a game creator so that others can make their own Point and Click Games which I'll be releasing later on, you can see a video of it here. The url to the game is = https://www.andy-howard.com/halloween-game I'm a front end developer and I've always wanted Point and Click games to be accessible via the web instead of always having to install apps. Unfortunately when I started this journey 5 years ago th
    3 points
  4. Hi everyone, today I've released a small library to create a "virtual joystick" for mobile devices. At every move it returns: angle: 0-360 direction: left, top, bottom, right, top_left, top_right, bottom_left or bottom_right power: 0-1 Screenshot: Demo: https://endel.github.io/pixi-virtual-joystick/ Source-code: https://github.com/endel/pixi-virtual-joystick Feedback always welcome! Hope you enjoy it!
    3 points
  5. Hello! I have been working on a 3D rendering library built on top of PixiJS, and just want to find out if anyone would be interested to try it and give feedback. Pixi3D is a JavaScript library which makes it easy to render 3D graphics on the web. It works for both desktop and mobile web browsers and includes several components which makes it easy to create nice looking 3D scenes out-of-the-box: Load models from file or create procedural generated meshes Supports physically-based rendering (PBR) and image-based lighting (IBL) Transformation, morphing and skeletal ani
    3 points
  6. Three full game source codes now available for download: https://www.panda2.io/sources These are totally free, if you have Panda 2 license.
    3 points
  7. jeroen

    Pixi.js Showcase

    I just finished my coloring app! Browser / iOS / Android It took a while with some years inbetween. Aaaalll the way back in 2017 I was trying to get some basic drawing going and got it working with the help of Ivan. Thanks @ivan.popelyshev ! Looking back at this example, it's pretty much the same as in the app. Thanks for the amazing library and all the support on these forums! it's been really helpful
    3 points
  8. Like @end3r we (the Defold Foundation) were also awarded a grant from Grant for the Web to explore the use of Web Monetization in games. The Defold Foundation will use the grant to integrate, promote and support the use of Web Monetization in web games created using Defold. The Defold Foundation will integrate Web Monetization through its plugin system, promote it through examples and tutorials and host a game jam focused on Web Monetization. We have a first version the engine and editor integration ready for testing (more info). Next up is to create the sample game and start planning for
    3 points
  9. I got tired of looking for animated sprites for every game, so I decided to make a little fake 3D engine for pixel graphics. Now I can code my own procedural animations I am hoping to use this is in a variety of games I am working on, including a little fantasy mmo.
    3 points
  10. Hi, I wanted to share a small game I made to try out Effector the state manager with Pixijs. hangman demo I wrote an article about it also Read more
    3 points
  11. serhiic

    Pixi.js Showcase

    Hello guys, I hope everyone is okay in these challenging times. Currently, I'm working on a (kinda) PIXI layout editor focused on the spine plugin pixi-spine.web.app and would love to get some feedback on it as replies to this post or through this form Thanks
    3 points
  12. Hi friends, I started working with these two companies at the same time, same games, same sdk. Both are very different and here I will tell you about my experience, I hope it will be useful to you as yours has served me. I uploaded to both platforms 2 games with more than 50 million players for a week, in Gamemonetize I am going to work a long time, in Gamedistribution today I closed the account and deleted my games. Contact: * In Gamemonetize is Katie, sweet, kind, decisive, quick to respond, my experience is unbeatable. * In Gamedistribution is Marco, it takes a long time to re
    2 points
  13. set text(newText: string) { super.text = newText Are you sure super setters can even work in javascript/typescript? > `set text` gets called during the construction of the class if (!this.ready) { ... } in the end of overriden constructor: ready= true; as to WHY? question: its OOP, it has problems in all libs /frameworks. I really dont want to explain the sequence of how pixi initiates it because it can change later. If you want to alter this behaviour, just post issue or even PR in pixijs github. If you want to know WHY? - read the source code, because
    2 points
  14. Nerik has gone to panic-buy some lettuce. But alas! He has become trapped at the checkout, and must make a last desperate attempt to honor social distancing rules. Direct game link here: https://neriktheslug.com
    2 points
  15. Drag to move camera Drag to move camera, locked pointer Drag to move camera, by pointer velocity
    2 points
  16. Hello! I've developed an open source application called Mantis Viewer that is being used by a few scientific institutions to visualize and analyze microscopy data. We started this project a couple of years ago, and it's built using TypeScript, Electron, React, MobX, and PixiJS. Currently, it's being used by the institute I work for to analyze data from our clinical trials, and is also being used by labs at Stanford and UCLA to develop new microscope technologies. Recently, a few users have been running into an issue where the WebGL context gets lost, and the renderer then fails to load (a
    2 points
  17. scheffgames

    Html5 Tools of Trade

    Here's a list of the tools I use daily for game creation, coding, animation, etc. I hope you'll find some useful info, let's begin. Art and Animation ########################################################################## Photoshop: The daddy and mommy of raster editing. I've tried lots of alternatives over the years but I always came back to it. Even though it's not a specialized tool (creating pixel art for example) I've found that it's quite flexible and it allows you to work on a variety of project types. I USE IT FOR: Text manipulation, logos, etc. GUI
    2 points
  18. b10b

    Rally Car Hero

    Revisiting Group-B inspired World Rally Car Racing we just finished our new racing game "RALLY CAR HERO" - a retro psuedo-3D racing game inspired by the original "SEGA RALLY CHAMPIONSHIP". 5MB of fast-five-minute-fun!. Play for free in your browser (no adverts): https://b10b.com/rallycarhero "Compete across the world as you race in the Rally Car Championship. Dodge opponents, boost around twisting corners, collect coins and upgrade your car for the next race. Are you the Rally Car Hero?" Technical: Like our other indie titles, this game was developed with Haxe +
    2 points
  19. Thank you for good words. These books are nice too: Build your own 2D Game Engine and Create Great Web Games Using HTML5, JavaScript, and WebGL WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL) I moved all examples from the second book to JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/Col
    2 points
  20. More than 2 months later and I decide to take another look at the function. I think I found a fix. This is what the function looks like now Engine.prototype.loadAllFonts = function(callback){ allFonts = this.assets.get(this.fontsKey); allFonts = allFonts.map(font => new FontFaceObserver(font).load()); Promise.all(allFonts).then(callback()); }; I changed Promise.all(allFonts).then(callback) to Promise.all(allFonts).then(callback()) Basically I didn't explictly have the callback function execute in .then(). I stumbled upon this by accident as I was trying to debug t
    2 points
  21. Ah alright, I get it. I saw the flash when moving to the next level, but I wasn't sure what it meant and didn't even realize that the number of dogs increased. Maybe you can insert a short pause with a message that indicates that the level has changed?
    2 points
  22. As a primer and insight into the not-always-obvious I'd recommend a read of @Antriel multiplayer platformer devlog:
    2 points
  23. Dr Popet

    Gostly Doors

    This is my new game, I made it to promote my new creative agency to make advergames in HTML5. Like my other games, this is a one button game, this one is ghosts theme and is very simple to play. http://c1ic.mx/GostlyDoors/ I hope you like it.
    2 points
  24. PIXI.Projection problem Hello, I am battling with PIXI.Projection I want to get the Transform of one object and use its world transform to add it to another container with the same dimesions. Basically I want to copy the exact object and pasting it on the other container should then match. So all is fine if I get the worldTransform of one object, and prepend the world transformation of the container, then creating an object by decomposing into a Transform. Stack 1 is the object i am copying from let cont = new PIXI.projection.Cont
    2 points
  25. Hello, I'm a web programmer with 3 years of experience (currently a senior developer). I've always been a fan of videogames and now I'm starting learning game development just for fun. Like in any type of development , you always face problems and learn of those. Sharing is the strongest tool to learn, you help other people to prevent/fix mistakes and they help you. What am I looking for?: People like me that is learning to develop games and want to meet other people to make games with them, share experiences, ask&answer questions. How will we organize? I have experience managin
    2 points
  26. I think it is wised decision that pixijs team exclude keyboard event. because pixijs is a "render" library not "game" engine. The easiest way is listening the keyboard event fire from "window" or "document". Please see [KeyBoard Event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). If you keep going you will start deal with the issued like: [Sync keyboard event to requestAnimationFrame] (https://gist.github.com/KayacChang/861f6be2970f47eaccc6b0814a930ccf). The second requirement is about the three topic: 1. how to deal with focus, like "focus event" 2. how to
    2 points
  27. Like all my games for c1ic.mx, this is a one button little archery game, trying too keep the look of the original TINY ARCADE games made in flash PLAY HERE ARCH ARCHER
    2 points
  28. What about Ruffle? the plug in for your site so you can still running flash, no need for the player to download a plug in because the site has the plug in installed for the players to watch the content, also seems to fix some flash plug in issues. Newgrounds is using it.
    2 points
  29. end3r

    js13kGames 2020

    The compo started yesterday - check out the blog post, and the short video announcing the theme. We have WebRTC added to the Server category, and continue having both WebXR (with Magic Leap 1 as the prize), and Web Monetization categories as well.
    2 points
  30. Short answer. Not much. Slightly longer answer: the Ticker class uses requestAnimation to do the looping, just as would be recommended if handling calling render yourself. It just handles some edge cases with ordering and timing when adding and removing things to this rAF callback, adds a bit of useful information, like a delta, and lets you control the minfps / maxfps and speed of the ticker. There is nothing wrong with not using it at all. But what it contains are the kind of things you may start to realise are useful as you progress
    2 points
  31. Hello everyone, I think it would be great to share information about honest companies, which pay on time and such things, it would be good for us to understand that sharing that information will not take away sales, on the contrary, we have to be united to save ourselves work and problems, this is my experience, I hope you share yours: Income distribution: POKI: It is one of the best companies to work for, they are honest, there is direct contact with them all the time, they always pay and on time, they are friendly and responsible. I am happy to work with them CRAZYGAMES: It is
    2 points
  32. It's basically a 'vertical endless runner'. A google search gives this tutorial. The 'hotride' game is Isometric, but you should only worry about that after you've finished coding a basic 2D version. Then just project it to 2.5D.
    2 points
  33. Hi, actually because of the way Gamedistribution speaks in such a derogatory way about Gamemonetize it does not seem that it is from the same owner, yes it is possible that Gamemonetize has copied the structure, I will warn everything, for now Gamedistribution still does not approve a single game, in Gamemonetize almost all have already approved. I will keep the entire community informed about my experience with both companies
    2 points
  34. Download: https://www.panda2.io/plugins#vr
    2 points
  35. Darko

    Set X of Physics Group

    Hello, I guess you can use: platforms.incX(-100);: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html#incX__anchor
    2 points
  36. Round 2 guys, hope no one minds me posting these, I enjoy seeing these kinds of things myself so figured I'd share them as I create em. This time we have a bunch of spine characters, matterJS in a webworker and when collisions are registered and direction changes, it sends back a message to the main thread to update the spines animation. The input for the player is also sent to the webworker and therefore it kinda acts like a client-server solution. The webworker code can also be executed in nodeJS. Thanks! Jammy
    2 points
  37. Turns out, they were It actually was deceivingly simple. The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.
    2 points
  38. If anyone is interested, I solved this by importing the json file and then using the Spritesheet class, as per this thread https://github.com/pixijs/pixi.js/issues/4029 import mySheetData from '../mySheet.json'; ... startLoad(){ this.loader.add('main',mySheetData.meta.image); this.loader.on('complete',this.loaded.bind(this)); this.loader.load(); } loaded(){ let mySheet=new PIXI.Spritesheet(this.loader.resources.main.texture.baseTexture,mySheetData); mySheet.parse(() => { myResources=mySheet.textures; }); } ... this.background=new PIXI.Sprite(myResources["background.png
    2 points
  39. Here you go: https://codepen.io/ivanpopelyshev/pen/jOWLjKd Serious problems: 1. I converted uniforms to pixi format 2. cant just specify 'uvs' if you use default pixi vertex shader, according to source it needs aVertexPosition and aTextureCoord. 3. its better to use aTextureCoord in frag shader instead of gl_FragCoord and resolution Sugar 1. use pixi interaction instead of document mousemove. works when mouse is above mesh. In case you move mesh I added getLocalPosition (aka toLocal). If you want it to work even not above mesh, subscribe on "renderer.plugins.
    2 points
  40. it's 'Loader' with first capital letter and you need to change it for resources as well var loader = PIXI.Loader.shared; var resources = PIXI.Loader.shared.resources;
    2 points
  41. For surface, you need your own Mesh3d because there's no such class in pixi-projection. This is an experimental project, and people who use it should look in sources, understand code, and write their own extensions. It should be much easier than doing your 3d from scratch or trying to port other 3d engines to pixi core. Yes, Im planning on porting whole threejs to pixi later In general, the problem of joining 2d and 3d objects in the same scene is big. Every time someone tries that - easy 2d API gets ruined by heavy 3D, or 3D becomes a mess. It took huge amount of my hours to make t
    2 points
  42. I am developing a unique but really simple puzzle game that consist in just put all the players (astronauts) in the goal squares at the same time. Rules: All astronauts move at once. NOTE: Only puzzle games lovers would enjoy this game, so if you aren't, you can skip seeing it:). Some levels could be really challenging. Here it is: https://llpujol.itch.io/puzzle-astronauts Comments & improve suggestions are welcomed:), Hope someone could enjoy it:)
    2 points
  43. List of few alternatives (that are used by PacpGames) is at https://www.pacogames.com/blog/pacogames-and-games-distribution-services
    2 points
  44. @charlie_says thank you for your answer, even though it didn't work in my case, it putted me on the way to what @bubamara said, I had actually found the solution but a bad config in my webpack conf was compiling the code in the wrong location 🤦‍♂️ So yes: simply providing PIXI through the webpack config is the way, thanks everyone for your help.
    2 points
  45. Never mind, this can be handled by @expo/browser-polyfill
    2 points
  46. updateCurvePrint(cable, offset) { const curvePrint = [ 0, 0, 0, -90, 0 + offset, -200, // example offset 0, -320, 0, -400 // texture width 400, height 27 ], curve = new Bezier(curvePrint), this.curvePoints = curve.getLUT(30); } createCable() { this.rope = new PIXI.SimpleRope(this.cableTexture, this.curvePoints); } Okay, thanks. But I think this task is very often, so maybe my solution will be helpful for other peoples. I used bezier-js https://pomax.github.io/bezierjs/ to create curves.
    2 points
  47. b10b

    Pop-Pop Kitties

    We just finished POP-POP KITTIES, a kawaii styled bubble-shooter. The game is made with HTML5 and runs in the browser on mobile or desktop. https://b10b.com/poppopkitties/ Gameplay: Play a cute puzzle as you pop-pop all the kitties using strategy and reflexes! With 100+ challenging puzzles and adorable kitties this kawaii Match-3 Puzzle Shooter game will charm players for hours. Can you collect all the stars? Technical: Based on our earlier game (POP-POP CANDIES) this version is also made with Haxe + awe6 + CreateJS and designed to run on any device at ~30fps. M
    2 points
  48. this.scene.tweens.add({ targets : this , scale : 10 ease : 'Linear', duration : 500, }); You can simplify it. targets only needs to be an array if it's multiple targets. scale: 1 does both X&Y yoyo default is false, as 0 of repeat and "this" of callbackScope.
    2 points
  49. Just figured it out, using scaleX and scaleY... this.scene.tweens.add({ targets : [ this ], scaleX: 10, scaleY: 10, ease : 'Linear', duration : duration, yoyo : false, repeat : 0, callbackScope : this });
    2 points
  50. Hey all, So I'm wanting using a web font in my Phaser project, but I'm noticing that when using the font in-game, it's automatically applying some sort of smoothing? When rendering straight onto the page outside of the game, the font comes out perfectly crisp when using "-webkit-font-smoothing: none;" See the attachment. I took a look into the Text game object and I'm seeing a "resolution" member, though doing "textObject.resolution = <number>;" doesn't seem to have any effect. Not sure if I need to run an update once I do that though. Do have other options available? Seco
    2 points
×
×
  • Create New...