Leaderboard


Popular Content

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

  1. 5 points
    supertommy

    Phaser 3 Examples in TypeScript

    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 gamedev 🤗
  2. 4 points
    vornay

    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."
  3. 4 points
    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 around for 3-5 years hyperhuman.mp4
  4. 4 points
    enpu

    Video plugin

    Play MP4 videos in your games. Download: https://www.panda2.io/plugins/video
  5. 3 points
    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!
  6. 3 points
    fitness23

    [PHASER] The Halloween Game

    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 there was no lightweight solution in order to deliver such an experience. I think I've now managed to achieve all the typical features that one would expect in a Point and Click game. These include: - Inventory - Npcs - Music - Sound fx - Voice acting - Cut scenes - Playing as multiple characters - Close up puzzles and more... Some under the hood features include: - Lazy loading of rooms as you enter them (since memory is limited on mobile devices). - Sound sprites of voice acting - Runs off a JSON file, no database required Some future features I'd like to include: - Lip syncing - Ability to walk and talk at the same time - Escorting procedures (allow both playable characters and npcs to follow you). So please have a play and any feedback will be greatly received. Only thing I ask is please look upon this in a development perspective rather than the quality of the story and puzzles (I'm not great at those :)) As I have mentioned I also have an accompanying game creator which will allow you to make your own games. Your feedback on the demo game will help me finely tune the game creator before I release that too. Quick frankly if I had ever known it was going to take me this long to do - I never would have started it. However it has certainly kept me busy and focused throughout covid-19. Many thanks, Andrew Howard.
  7. 3 points
    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 animations Customized materials and shaders Built on top of the widely used PixiJS library which makes it simple to combine 2D and 3D You can go to https://pixi3d.org/demo/drone/ to view a real-time demo or visit https://github.com/jnsmalm/pixi3d to download and read more about it.
  8. 3 points
    enpu

    Download free game source codes

    Three full game source codes now available for download: https://www.panda2.io/sources These are totally free, if you have Panda 2 license.
  9. 3 points
    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
  10. 3 points
    britzl

    Discoverability & Monetization

    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 the game jam.
  11. 3 points
    sanojian

    Fake 3D models in Phaser 2

    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.
  12. 3 points
    coder2012

    Hangman - Pixijs and Effector

    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
  13. 3 points
    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
  14. 3 points
    Concept Artist for Hire Specialising in Environments and Keyframes I am an experienced concept artist in the Game and Film/TV industry. I specialise in environments, keyframes, architecture, creature design and characters. I am currently looking for long-term freelance projects but happy to do short ones too. Alternatively, I am happy to just do some black and white sketches or some colour grading/storyboarding/etc - just get in touch!I have included my work below and my website, please feel free to email me, message me on ArtStation or on Discord to discuss the project and rates.Website: http://www.elliejcooper.co.uk/ArtStation: https://www.artstation.com/elliejcooperEmail: enquiries@elliejcooper.co.ukDiscord: Ellie#8157Portfolio: (Please look at either my website or ArtStation for more, or for better quality).
  15. 3 points
    Luke@Cocos

    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.
  16. 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
  17. 2 points
    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 creation - shape tools and the alignment tools come quite in handy. Add effects (strokes, shadows, etc) and you're golden. Overall finishing touches. Playing with curves,intensity, blending modes to give my graphics that extra visual boom. ALTERNATIVES: GIMP: Also called the poor's man Photoshop. It's a pretty decent and powerful program and it has many of the features offer by it's more expensive brother Photoshop. I gave it multiple spins over the time and I was disappointed in the GUI arrangement and the overall workflow. Asesprite, Pyxel Edit, Graphics Gale: These are 3 different pixel art creation software packages. I don't do pixel art and I only tried them for a short amount of time but I hear good things about them. ########################################################################## Illustrator: One of the most famous vector editing programs out there and rightly so. First of all it's an Adobe product so you have good integration with other Adobe products (such as Photoshop) and a certain level of quality. Although it's a bit tricky to get into it at first it's really worth it - there's nothing more powerful out there in terms of vector editing (as far as I know) and you can really create some awesome art for your games. ALTERNATIVES: Corel Draw: Altough I am a big fan of PainterX (digital painting at it's best from Corel) I'm not so taken aback with Corel Draw. Obviously you can create artwork in it but I had the sensation that it is more geared towards desktop publishing. It's a good product all in all but you should rather take the time to learn Illustrator - it will be worth your time. Inkscape: This is a free vector editing software and you would probably expect it to be bad in some way. It's really not. Very easy to learn and with an intuitive workflow it allows you to create art simple and fast. True, it lacks the sophistication of Illustrator but it's the perfect choice for a beginner artist - the guy behind game art for programmers uses it extensively so he must know something. ########################################################################## Moho: IMHO the best 2d skeletal animation software out there. The only decent competitor out there is Toon Boom but it lacks in the bone setup area and it's mainly focused on frame by frame animation. Spine it's simple and intuitive but it lacks the power required for more complex setups ( it also lacks vector drawing). It's only drawback is that it can't import properly .psd's and .ai's but it compensates by having it's own (very powerful and sometimes more intuitive than Illustrator) vector drawing tools. Oh, and I mentioned that it also has particles? Motion Blur? Z Depth layer ordering and animation? IK animation? Animation Morphs (like the ones you can find in Maya)?Smart Bones? Animated strokes? 3d capabilites? You get it, I'm hooked. I USE IT FOR: Character and prop creation 2d Animation ALTERNATIVES: Spine: A lightweight 2d skeletal animation program. Intuitive and friendly especially for artists that are new to animation. ToonBoom: This is Moho's main competitor as it has similar complex animation tools. It has a steep learning curve and it offers lots of features in terms of animation. I think it is more geared toward animation movies rather than games but you can definitely create great art and animation in it if you invest in learning it. Adobe Animate:Adobe's 2d animation flagship product. Since it's Adobe you know you'll get tight integration with other products from the Adobe Suit (Photoshop, Illustrator) and a certain standard of quality. One thing I liked about it was the particle creation capability and the large variety of brushes. Although it's a bit weak in the area of rigging and bones (specially compared to Toon Boom or Moho) it is a powerful and complete piece of software so it might be worth your time. ########################################################################## Cinema4D: Altough I've been infatuated with Maya I've come to love this friendly 3d editing software. Why? Because it just works. It works fast, it works good and it's easy to learn even for 3d noobs. I USE IT FOR: 3d Text creation Various object renders ########################################################################## Lightroom:The best photography catalogue out there. I had 50 thousand photos once (paintings pics mostly) and other similar programs died just trying to read them. Not Lightroom. How can a dev might use it? For me it's useful when I gather lots of art inspiration from various websites, games, etc and I can browse and rate them with ease and pleasure. I USE IT FOR: Inspiration Management ########################################################################## SqCheck:A nifty little utility that allows you to preview rendered frames (sequenced) of animation at various speeds. It might not seem as much but it's much easier to focus on the animation final result without all the clutter of a big animation program. I can spot common mistakes quite easily - like having too much static extra frames at the end of an animation (like having a walk cycle and the foot stays just a bit too much at the end of animation). Or I can load it each third or second frame sequence to see how it looks without all that interpolation in between (because smaller spritesheets and snappier animation - Richard Williams said in it's incredibly inspiring animation book - The Animator's survival kit. I USE IT FOR: Animation final touches ########################################################################## Timeline Fx: A particle editor for all your particly needs. Explosions, flames, bubbles, etc. It has the best blend of usability and ease of use. Another particle editor beast that I like it's Particle Illusion - altough you can create the same particle effects with the standard particle properties (particle life, velocity, lifeOverSpeed, etc) it really shines at particle assembly - you can combine multiple particle effects, animate them, create deflectors/blockers/wind, clip them to alpha masks, etc. I USE IT FOR: 2d Particle creation and FUN ########################################################################## Irfan View: An image viewer that can cook, clean and take out your garbage. Well, maybe not but it does have a motherload of options and it supports a large variety of image formats (.psd, .tiff). It even reads .txt for god's sake. My favourite shortcut in Irfan View is Shift + 1. It opens your image in a predefined application - you guessed it, Photoshop. And it's very fast. I USE IT FOR: Image viewing and fast access to Photoshop. ########################################################################## Programming ########################################################################## Sublime Text: "The text editor you'll fall in love with" - says in the website title. Well I did...over the heels. Coming from a C# background I was used to Visual Studio - awesome IDE, ideal for large projects and with lots of little helpful features. Sadly using JS in Visual Studio it's a drag. Intellisense it's basically useless, go to code definition doesn't work well most of the time, starting it takes quite some time. Sublime Text to the rescue. Lightweight, uber customizable, lightning fast, works like a charm with JS. I recommend installing JS Hint for linting and Js prettify to make your code readable. Also learn some general shortcuts for a better workflow. And if you really wanna fly in it learn either Emacs or Vim shortcuts (it has plugins for both). I used Emacs first - a bit too heavy and a carpal tunnel risk. Switched to Vim and after the rather abrupt learning curve I feel much more comfortable. And if you really wanna protect your hands and increase your touch typing speed I'd reccomend switching from Qwerty keyboard layout to Dvorak. ########################################################################## Phaser: Html5 game framework. Why? You probably know why since you're on this forum so you're probably a dev yourself. Easy to learn, quite powerful, good performance. ########################################################################## Other ########################################################################## Sprite Sheet Exporter Photoshop Script: Altough you can create spritesheets directly from many 2d Animation programs I find it it allows for much flexibility to import sequenced frames in Photoshop (using File > Scripts > Load Files into Stack) and doing various refinements -I usually get rid of all transparent pixels with Image > Trim and apply various color corrections - this will be my master animation document. After that I can resize it to fit my needs (can happen multiple times during the life of a project) and export it to a sprite sheet with the Exporter script. ########################################################################## Audacity: Simple yet powerful sound editing software. While I can't create music/sfx by myself I can greatly improve it by mixing it, fading in/out, applying various effects. ########################################################################## AutoHotkey: A nifty little utility for Windows that allows you to remap various shortcuts, exe paths and other commands to custom keyboard bindings. It increases the workflow speed enormously and it makes a working day more pleasant. Imagine double clicking on Photoshop.exe 30 times a day. It might not seem much but if you're in another application you'll have to minimize it and hunt the icon on desktop - it interrupts the creative process and takes a bit of time. It's much easier just to press a combo keyboard shortcut (mine it's Ctrl + R) and there pops Photoshop. Or my current working folder. Or sublime Text. Try it - you'll love it. ########################################################################## Wamp: Web Development Environment. You'll need it to develop Html5 games and it's very easy to install and use. ########################################################################## Sumatra Pdf: For all your pdf reading needs - programming, animation and design books. First it was Acrobat reader and it was good but then it got bloated and sluggish. Then it was Foxit and it was so much faster than Acrobat Reader but then it got bloated and sluggish. Now it's Sumatra and altough it's simple it's very fast and it supports .mobi and .pdf. Let's hope it stays clean. ########################################################################## Various Online Tools ########################################################################## Tiny Png: Incredible png compression with very little quality loss (if any). I even saw 90-95 percent file reduction on my png's - that's going from 1 MegaByte to 50 KiloBytes - pretty impressive) ########################################################################## Trello: Task management and collaboration. I heard good things about it but I think it's better suited for larger projects and I still prefer to keep track using pen and paper. ############################## @Goblet Ed################################## draw.io: "draw.io is completely free online diagram editor built around Google Drive that enables you to create flowcharts, entity relation, mockups and more. Your data is stored only in Google Drive, so no additional third-party to trust with your data (or extra accounts)." It has good object snapping which makes placing and aligning things very pleasant. ########################################################################## I USE IT FOR: Creating screen flowcharts One page designs Level designs (can import your sprites) ############################## @Goblet Ed################################## Coggle.it: Pretty mind-mapping tool. I USE IT FOR: Creating pretty mind maps to organize new information ########################################################################## *************************************************************************************************************************************** Feel free to contribute in comments (link and your personal experience) and I'll try to keep this updated - just tools and utilities please, there are lots of resources lists already. ***************************************************************************************************************************************
  18. 2 points
    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/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  19. 2 points
    b10b

    To late?

    imo ... a well made HTML5 game is in a good position to see a lot of plays (e.g. a few million plays a year). Generally audiences are growing - playing a game in a browser (or embedded within a messenger app) seems less objectionable than it did in years past, and emerging markets seem to crave light-weight experiences. But it's not a mainstream marketplace and turning players into gold is not easy (in-game ads are always going to be low yield). Creatively making games in HTML5 is wonderful because time to publish is zero, barrier to entry is zero. So be cautious of platforms like FB IG etc because they contradict some of those benefits ... weigh up the benefits they claim (discoverability and monetization) vs the hassle (apple developer license, ios device cost, approval rounds, revenue splits, risk of deplatforming, being cloned etc). It's never too late to make games for the fun of it, or to make games that will make someone else happy to play.
  20. 2 points
    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 respond and the first few times I had to speak to his boss to make him do it, he is kind but tries to defend how indefensible his company's lousy service is. Distribution: * Gamemonetize spread my games through many small portals that cannot buy licenses nor have the platform for income distribution, it is exactly the public that needed to reach. * Gamedistribution did not spread my games anywhere, only their own games stand out. Profits: I cannot give the exact numbers for legal reasons but I will try to be very clear. * Gamemonetize: The two games in one week live generated around $ 10 a day, I want to clarify that the first day live gave a great boost exceeding $ 20, around $ 80 in total / week. * Gamedistribution: In approximately the same time the games generated $ 0.03 in total, between 0.00 and 0.01 a day between the two games. Games approval: * Gamemonetize: Almost immediately, a couple of hours. * Gamedistribution: Several days and I had to put a lot of pressure on the bosses, it is not enough just to send the game to the team that is in charge of it. I hope this works for you, any private question that you have is welcome
  21. 2 points
    Every time I check FBIG I see many of our games. Thousands of plays, hundreds of thousands of ad-impressions. Cool ... right?! However, we never posted them there? They are ALL Intellectual Property and Licensing infringements. We receive $0. So we submit a takedown notice, on a per-app basis, and in fairness to FB the game usually goes soon after. It's a slow and tedious process, designed to "check-the-box". I expect the perpetrator receives no income from their dodgy deed, and they are likely inconvenienced with a suspended account? But, next day, same deal - new user, new thumbnail, new game name, new app id - still our same IP being violated. There is no apparent progress by FB to improve the situation, refine the review process, take responsibility and clear up their publishing mistakes? This might be defensible if Facebook wasn't making money from these circumstances, or if the same content wasn't being re-published and "takedown"ed on multiple occasions. Derivative and plagiaristic heuristics exist (as is seen if a video with non-licensed music is posted to Facebook) - it would be trivial to run a source code pattern match against previously submitted takedowns, and flag those in need of scrutiny. Such a routine might even improve the signal-to-noise-ratio on the plaform (and improve user-experience and eCPM for legit games)? For anyone else impacted by similar issues the direct reporting link is: https://www.facebook.com/help/contact/634636770043106?helpref=faq_content You'll need to be a member of Facebook to report Facebook's "violation or infringement of your rights".
  22. 2 points
    Hi all, As discussed on our call today, I said I'd bring together a list of bugs I've filed relating to the quality of the web platform (i.e. the kinds of things causing developers headaches when they run in to them). To get the ball rolling, here are a few. Please feel free to add your own, but I think we should try hard not to throw in our full bug lists - I for one have quite a few filed over the years! Let's try to keep this focused on things which will affect web development in general, cross-platform gotchas, and the like. Chrome OffscreenCanvas works in Chrome, but is not supported in the WebView: crbug.com/923007 Audio playback sometimes has unexpectedly high latency on Android: crbug.com/1014614 WebView performance is sometimes unexpectedly worse than in Chrome. It's a difficult issue to track down and it's not clear what the cause is or if there are multiple causes, but two issues related issues are crbug.com/810928 and crbug.com/1127307 Sometimes we see GPU driver crashes, e.g. crbug.com/1086024, and it seems really hard to get the graphics vendor to respond or act on it Firefox Options for createImageBitmap aren't implemented (or fully implemented - hard to tell from the tracker) - related issue: issue 1367251. It's useful for preparing textures for WebGL upload, but because of this you have to deal with three paths: no ImageBitmap (current Safari), ImageBitmap but no options (Firefox), ImageBitmap with options (Chrome) You can't draw an SVG to a 2D canvas, even with the overload that specifies the width and height: issue 700533 Support for OffscreenCanvas: issue 1390089 Safari createImageBitmap (issue 182424) and options (issue 202458?) Safari is the last browser that does not support WebM Opus audio. This is the sole reason we have to use dual encoding or ship our own WebM Opus decoder with the game. If they supported this, we would at last have one audio format that plays in all browsers. Issue 183852 We find pretty much every iOS release breaks something. Here's the latest in our case - switching tabs breaks audio playback in iOS 14: issue 217606 Support for OffscreenCanvas: issue 183720 Support for WebGL 2: issue 126404 - seems to be on the way though, latest tech preview enabled it!
  23. 2 points
    As a primer and insight into the not-always-obvious I'd recommend a read of @Antriel multiplayer platformer devlog:
  24. 2 points
    Dr Popet

    Arch Archer - Archery game

    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
  25. 2 points
    walfin

    The COVID-19 Game

    The first Alpha release of The COVID-19 Game is out! Play as the red blood cells and white blood cells and defend the body against the infection of SARS, MERS & COVID-19. This is quite possibly the first Real-Time Strategy / Real-Time Tactical style game to be developed using Quasar & MelonJS. It’s probably the third game in the world about COVID-19. It’s been deployed to a single page app, Electron, Android & a browser extension. Check out https://customautosys.com/covidgame now! I have already uploaded the Android app to the Play Store and the BEX to the Chrome Web Store & Firefox extensions repository. It’ll take a while for those to approve. I’ll update the links here once the store listings are approved. However, you can already access the Snap Store listing: https://snapcraft.io/covidgame (for Linux users). Many thanks to obiot for creating melonjs! Hope you can work on those bug fixes soon so I can also iron out the bugs in my game.
  26. 2 points
    Dr Popet

    The future of online browser games

    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.
  27. 2 points
    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.
  28. 2 points
    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 an excellent company, they always pay on time, they are responsible and friendly, there is direct contact with them all the time, it was the first company I worked with in HTML5 and they taught me a lot, I will always be grateful and I recommend working with them. GOGY: My experience with them so far is very bad, terrible, they do not pay, they do not comply, I have been there for 6 months with my games and I have not received a dollar, I do not recommend working with them. Non-exclusive licenses: RHM (Twoplayergames): It is an incredible, honest and responsible company, I did a lot of business with them and they always comply, they are friendly, my experience with them is great, I love working with them, I recommend doing business with this company. LAGGED: Excellent company, they always comply, they are honest, kind and responsible, there is direct contact with them and I love working with them, I recommend doing business with this company. SILVERGAMES: I have a good experience with them, they are honest and kind, sometimes they take a while to respond to the messages but I like to work with them, sometimes you have to lower the price of the license but you have to take into account that they are a company small, I recommend this company. I hope this is the beginning of a collaboration between all, we have to be in solidarity with each other and help each other, I hope that everyone contributes their grain of sand, being selfish does not work in this business. Greetings to all Notice that English is not my native language and I apologize if there is any error in my writing, surely you will be able to understand me anyway.
  29. 2 points
    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.
  30. 2 points
    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
  31. 2 points
    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
  32. 2 points
    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.interaction" , not mesh. You can subscribe on stage , but stage might have not all screen. If you have background - stage will work of course 2. width/height specified in start of doc What I didnt do: 1. this demo needs margin:0 padding:0 overflow:none for body css, as always for fullscreen rendering apps For tasks like this its better if you clone pixi repo , open it in separate IDE window and search for classes that you use (i hope you know shortcut) . Its close to webgl calls and you should see how things are stored and then converted to webgl operations.
  33. 2 points
    ivan.popelyshev

    Pixi Projection 3D Surface

    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 that architecture on pixi that doesnt require big changes in core and introduces billboards without ruining API. @jonforum helped a lot with his tests. As far as i know, one of best solutions of 2d/3d are AwayJS and I'll definitely port something from them too.
  34. 2 points
    llpujol

    Puzzle Astronauts Game - PixiJs

    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:)
  35. 2 points
    List of few alternatives (that are used by PacpGames) is at https://www.pacogames.com/blog/pacogames-and-games-distribution-services
  36. 2 points
    Laura

    Generate bitmap font

    If anyone faces the same issues, I have discovered the problem. In the fnt file: <font> <info face="testFont" size="72" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="0,0,0,0" spacing="0,0" outline="0"/> <common lineHeight="80" base="57" scaleW="361" scaleH="512" pages="1" packed="0"/> <pages> <page id="0" file="testFont.png"/> </pages> ... On line 2, face="testFont" must match the name from line 5 (file = "testFont.png") Apparently, this undefined size error is a facade for anything that might be wrong with the font file.
  37. 2 points
    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. Many of the assets originated from royalty free sources and most level designs came from a level pack designed for Frozen Bubble, so big thanks to contributors there. The levels (and star ratings) were sorted based on completion time of sample plays - so they should feel progressively harder. Commercial: We made POP-POP KITTIES as a followup to POP-POP CANDIES because (despite its unoriginality!?!) it was well received, played in the millions, with average play sessions beyond 45 minutes - it's the kind of game that once you start it's hard to stop! This game is available to play or license from our website: https://b10b.com
  38. 2 points
    I make a Kaiju Strategy game called Kaiju Krashers. Please let me know what you think of it, I'm open to all criticisms. I'll be complete soon and available for licensing.Controls-Arrows- MoveZ- Move BackX- Atomic BlastR- Restarthttps://retrobolt.github.io/KaijuKrashers-V1.0/
  39. 2 points
    Easiest way for this would be to use some tweening library. For example tween.js (https://createjs.com/tweenjs), gsap (https://greensock.com/3) or some other from multiple possibilites. The examples below are done with tween.js. You could have in your click-handler code like: function moveTo(character, newX,newY) { var time = 500; createjs.Tween.get(character.position).to({x:newX, y:newY}, time); } and it would move the character with given amount of time to given position. If you do not wish to use tweening libraries, then you can also calculate the animation yourself and update the position in the mainloop. Below is one way how to do that (pseudocode, might have errors) const app = new PIXI.Application(...); const container = new PIXI.Container(); const characterSprite = PIXI.Sprite.from(...); const bg = PIXI.Sprite.from(...); container.addChild(bg); container.addChild(characterSprite); let targetPoint = characterSprite.position; let moveStart = characterSprite.position; let moveTime = 0; let timeCount = 0; bg.interactive = true; bg.addListener("click", function(e){ var to = /*Determine the coordinates where to move*/ targetPoint = to; moveStart = characterSprite.position; //Calculate the distance between points to determine how long should move last const dx = to.x - moveStart.x; const dy = to.y - moveStart.y; moveTime = Math.sqrt(dx*dx + dy*dy); }); app.ticker.add( function(delta){ if(moveTime > 0) { timeCount+=delta; if(timeCount >= moveTime) { //End has been reached. moveTime = 0; characterSprite.position = targetPoint; } else { const dx = targetPoint.x - moveStart.x; const dy = targetPoint.y - moveStart.y; characterSprite.x = moveStart.x + dx * timeCount/moveTime; characterSprite.y = moveStart.y + dy * timeCount/moveTime; } } }); Basically what happens there is you move the character between it's current point and target point by linearly interpolating the position based on time.
  40. 2 points
    In PixiJs V5 this is how to achieve nearest neighbour scale mode: PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
  41. 2 points
    Junkybyte

    Pixi.js Showcase

    Ivan, I want to share with you how much I appreciate your work, Pixi is an incredible library, I never wrote anything on the forum but I used it extensively these last months and your suggestions / answers have been a huge help. Thank you for the kind words, I really appreciate, if you ever actually refer it do it with a bit of salt, I'm pretty sure my usage of Pixi can be improved, when I started writing the library I had no prior experience with it and I learned on the road. Nevertheless I'm quite honoured have a lovely day
  42. 2 points
    ivan.popelyshev

    Shader performances

    Welcome to the forums! You are lucky, because right now in v5 we have exact solution for the problem. Yes, pixi gives you ability to make your geometries and even re-use them (like you did), but still, count of drawcalls can be a problem! If you capture one frame with SpectorJS you'll see a problem ( I didnt do it but probably there are too many drawcalls). So, PixiJS actually exposes its batchrenderer! It fills up one geometry for many objects every frame. Demo is here: https://www.pixiplayground.com/#/edit/CMKvgOt-bvlCG4QHdswIP . We didnt add it to examples yet, but we really should do it because of people like you who need it. The idea is to specify "pluginName" for Sprite, Graphics or mesh material. Sprites are always batchable, but in case of Graphics and Meshes you have to make sure isBatchable gets set to "true" so instead of shader pixi pushes data to batcher in `renderBatched` function. Something like that. In your particular case, Sprites are enough, so you dont have to think about what I said in previous line The downside - you have to to tint and other stuff in attributes instead of uniforms. Tint is already handled in demo, so in your case you need extra attribute field for "ratio".
  43. 2 points
    Fabletale

    Tiles in Between

    Tiles in Between is a 2D puzzle platformer where you have to rearrange the tiles and make a path to the princess. The game is made in Unity for WebGL, and currently is posted on Kongregate. Play it here: https://www.kongregate.com/games/soetsutakiwasa/tiles-in-between
  44. 2 points
    blackmoondev

    Google GameSnacks

    We have two games on the platform. It's pretty nice and cool, the api isn't very hard to add. Process of dealing with Google is quite long though (as you could imagine).
  45. 2 points
    yulijun

    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
  46. 2 points
    charlie_says

    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...
  47. 2 points
    makalu

    How to tween scale in Phaser 3

    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 });
  48. 2 points
    Colbydude

    Pixel Perfect Fonts?

    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? Secondly, how do I go about setting the global/default font so that every text object will use the font I specify?
  49. 2 points
    //1. use bind requestAnimationFrame(this.renderLoop.bind(this)); //2. use new function var self = this; requestAnimationFrame(function() { self.renderLoop(); } ); //3. use ES6 requestAnimationFrame(() => { this.renderLoop() } ); //4. bind function in constructor function FFT() { //... this.renderLoop = this.renderLoop.bind(this); } One cannot just walk into mordor^W^W^W use "this" in the function that is passed somewhere. Crash course on javascript.