mattstyles

Moderators
  • Content Count

    1671
  • Joined

  • Last visited

  • Days Won

    24

Reputation Activity

  1. Like
    mattstyles got a reaction from hotfeet in cant see my png on screen if i use an array of canvases   
    Hi @wtf, welcome to the forums.
    First up, blaming tooling when you don't know how to operate it is a good way to always be frustrated by your tools. 
    You're making some errors in using JS, these are all fundamental rules to using the language though, and not quirks (of which it, and browsers, have plenty, but you're not running foul of them here).
    for (i = 0; i < 18; i++) { im = new Image() im.src = 'foobarbaz' im.onload = function (snakectxs, i) { // stuff }(snakectxs, i) } This does not do what you think it does, for at least two reasons.
    Immediately Invoked Function Expressions (link)
    In JS we invoke functions with the `()` syntax. You can do this whenever you want so long as you have a reference to the function declaration and it is currently in scope. This is pretty standard for many languages, certainly not quirky behaviour.
    You have no reference to the function, but it doesn't matter, you have immediately invoked it anyway. What this has done is invoked the function and applied its return to `im.onload`. The return of that function is null.
    There are at least 3 issues here:
    * You're not attaching a function as a listener.
    * The function is immediately invoked, rather than waiting for the image to load, hence, you're drawing without an image to draw.
    * You have left `im` as global, so it just gets over-written each time, there are 18 of them sure, but only one reference, which will be to the last one. Not that it matters here anyway.
    Asynchronicity
    Images load over the network, that takes time.
    JS interacts with most browser APIs in an asynchronous manner and it does this using event emitters i.e. the browser or DOM elements emit events that JS listens for and responds to.
    So... you're on the right track trying to create a listener, its just that you're invoking the function and not actually creating a listener. Again, most C-like languages work this way, JS is no different here.
    A solution?
    There are many many ways to achieve what you are after, some simple and some involving some interesting concepts made possible by the flexibility of JS, for example:
    for (var i = 0; i < 18; i++) { var im = new Image() im.src = 'foobarbaz' im.onload = function (i) { return function () { console.log(i) } }(i) } This way returns a function, thus, invoking the exterior function immediately returns the interior one which gets applied as an `onload` listener. `i` is then scoped to the closure (in this case the function scope) and is as you would expect.
    I wouldn't suggest you need to do the above, it merely highlights the power and flexibility of JS by treating functions as first class citizens. Some other languages also have this power but it is a common, if slightly advanced, technique in JS (probably more so than other languages).
     
    To return to your initial solution design, you don't need 18 canvases just to rotate images. You can do this by applying a translation, drawing, and then unapplying. Again, this is fairly standard across languages and platforms for using raw drawing ops, ordinarily you'd use higher abstraction libraries to help, but you can get your hands dirty if you like, nothing wrong with that.
    This is a dirty example showing one rotated rectangle and one not:
    <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.rotate(20 * Math.PI / 180); ctx.fillRect(50, 20, 100, 50); ctx.rotate(-20 * Math.PI / 180) ctx.fillRect(10, 10, 40, 20) </script> It is years since I worked that low-level with Canvas context, but reading the docs is really very helpful.
    Good luck in your project and with learning JS.
  2. Like
    mattstyles got a reaction from vornay in Will Phaser 4 be written in Flutter?   
    Phaser is tied to JS, that is first class in browsers and will be for a while. WASM being de facto is far from a certainty, and a long way off in the best case for it (it may see more initial penetration in tooling than applications).
    Tying your project to a tech like Flutter (or even Dart) is ok, but can also potentially be a killer for your project.
    TS isn't immune from this either (see CoffeeScript) but its far less invasive. If TS died tomorrow (not that it would, barring some crazy licensing thing) deleting the TS bits is trivial and can be handled by a codemod and you haven't tanked your project. Not so for writing in a completely separate language.
    Not that I don't think a Dart/Flutter version is a bad idea per se, but, for me, it would be a port (or a totally separate project that follows the same/or similar conventions) with Phaser remaining as a JS (TS) project to ensure longevity of the project and remove barriers to entry.
  3. Haha
    mattstyles reacted to mentuat in Y8 Destroys Your Games (and websites)   
    Complaining about a bunch of IP infringing 'Mario' games being removed from a distribution network?  Ballsy move bringing attention to that!
  4. Like
    mattstyles reacted to rich in How do you time a pointerdown event?   
    In 3.15:
    this.input.on('pointerup', function (pointer) { var duration = pointer.upTime - pointer.downTime; }); In 3.16:
    this.input.on('pointerup', function (pointer) { var duration = pointer.getDuration(); });  
  5. Like
    mattstyles reacted to ivan.popelyshev in Vue + Pixi v4 events do not work   
    Hi! it should work. Most of the time, some DOM element blocks all mouse events from reaching the canvas.
  6. Like
    mattstyles reacted to themoonrat in Pixi.js Showcase   
    https://github.com/themoonrat/webgl-benchmark
    Lets you compare different scene setups in different versions of pixi and phaser
    Useful to compare different engine performance. To compare different version performance. And to compare different scene setup performance.
    Ie. compare the speed for 'Multiple Textures' for Pixi v3 vs v4. Multi texturing was added for v4, so you'll see a large speed increase. Likewise compare 'Graphics: Complex' from v4 to v5 (dev is best); a lot of work into batching Graphics shows clear performance benefits.
    But then on the same hand on a modern Pixi version and test 'Sprites: Multiple Textures' vs 'SpriteSheet', and you'll see speed improvements on devices with less than 16 texture units; showing benefit of keeping sprites onto a single texture.
    Any requests, please raise issues
     
     
     
     
  7. Like
    mattstyles reacted to -AAG- in AAG batch of games #4   
    Another year another batch of games. This was a slow year and the year of the sequel too.
    Joe Lost 2

    Joe is lost again! Please help him. ABCya exclusive. Playable only on desktop unless you have a mobile account.
    PLAY
     
    Light On 2

    The exclusive sequel to Light On only on ABCya.com! Playable only on desktop unless you have a mobile account.
    PLAY
     
    Bridge Hopper

    Hop from bridge to bridge to eat all the carrots or Bunny will cry   ABCya exclusive. Playable only on desktop unless you have a mobile account.
    PLAY
     
    Money Land 2

    Back to Money Land! In this strange new area your gravity will flip every time you stump a critter. ABCya exclusive. Playable only on desktop unless you have a mobile account.
    PLAY
     
    Jon Lightning

    Jon can move too fast for his own good. Help him. A port/adaptation of one of my old windows games under the Alexitron banner.
    PLAY
     
    Boxed 2

    More Boxed fun. Now with metal boxes, moving walls, and holes!
    PLAY
     
    Lost Joe

    The none-exclusive edition of the Joe Lost games by popular demand.
    PLAY
     
    That was 2018 for me. Hope you guys had a good year as well. You can check out the rest of my catalog at www.gamesaag.com. I am thinking of removing the freebies section altogether. 
    A question for fellow developers: I was thinking about making a mobile app with a compilation of some of my games and then continue to add to it as I make more. Anyone tried something similar? Simple puzzle games seems to be  what I do best but I don't mind to experiment. I was thinking about 1080p resolution and hi-res graphics though I really like the style that I have been developing, maybe I'll try to reproduce it with 3d pixels instead. Thoughts?
    For GameMaker: Studio users: Tried to get into Studio 2 and just couldn't. That new user interface is an abomination and the node based events, I just don't get it. I hope they make a classic shell in the future for old farts who have been using GM for over 10 years. Hard to adapt now.
     
  8. Like
    mattstyles reacted to deepcode in Refactoring sympathisches Kinder - Flash-Game (Breakout Style) zu Web/IOS/Android   
    Hi, thanks 🙂
    Its for an german-only speeking client, so german is mandatory for this job.
    Essentially its a refactoring of a children's flash game in breakout style to HTML5/Javascript web and a Android/IOS App.
  9. Like
    mattstyles reacted to Little Sharky in How to make Vanilla JavaScript game mobile friendly   
    Thanks for this I hadn't actually seen it in the Mozilla doc, looks great and just what I'm after.
    Cheers for sharing.
    LS.
  10. Thanks
    mattstyles got a reaction from 8Observer8 in How to make Vanilla JavaScript game mobile friendly   
    MDN is a great resource, i.e. for touch events https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
     
  11. Thanks
    mattstyles got a reaction from 8Observer8 in Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)   
    This isn't true.
    It'll be older browsers that they are worried about, not Opera Mini, even so though, WebGL has excellent support, the percentage of users without support (depending on where your target market are) is tiny (caniuse shows 0.83% global for <KitKat Android, Opera Mini users won't be stuck with it—thats 2% anyway, its tiny—, iOS has supported and supported well for a long time).
    Publishers/sponsors requiring it is another matter though. 0.83% is pretty compelling. It's totally dependent on the actual target market, largely split by geography, so the numbers might vary.
    What was the reason?
    Phaser 2 uses Pixi, albeit a slightly older version (I think, may have changed), so I'd expect them to be almost comparable in performance. Phaser doesn't add much (anything?) to the rendering layer, so perf should be mostly the same (the older version, if true, could accrue more of a difference, maybe that accounts for it).
    It's not a like-for-like comparison though, Phaser is a framework, Pixi is a rendering lib.
    Phaser 3 (I think) uses a different rendering mechanism, again, I'd expect perf to be comparable or better though otherwise it would be a very odd choice to ditch Pixi as a rendering engine.
  12. Like
    mattstyles reacted to wtf in cant see my png on screen if i use an array of canvases   
    I appreciate the help and will look into those links/terms.
  13. Like
    mattstyles reacted to Crisiluluman in Flappy Bird   
    Ohh! I did not realize there was so much space when uploading, I will fix that, and thank you
  14. Like
    mattstyles got a reaction from MerryArcade in What game engine/framework do you use?   
    Phaser and Babylon are both very popular here, popular enough to have their own forums. There are others that have their own subs as well.
    Unity, GameMaker Studio and Construct are also mentioned a lot which are more integrated environments than frameworks like Phaser and Babylon.
    I wouldn't call Pixi a framework, its a module that forms part of a framework (or application architecture).
    I find the following useful for classification:
    * With modules you own the architecture and you (as developer) employ the modules to perform specific tasks
    * Frameworks own the application and you (as dev) are afforded windows into the architecture in which to work
    Depending on which of the 2 above you find yourself most agreeing with will usually dictate your enjoyment of using either smaller, focussed modules or larger, more powerful frameworks.
    Generally speaking, using a framework will be faster as they have come up with solutions to common problems when structuring applications, or, in our case, specific applications, namely games. Generally they aren't super-flexible and you really have to agree with their solutions or you end up fighting them to get work done, you really have to buy-in to the structure and philosophy of the framework to get the most out of using one. If you do that then they can be very powerful and allow you (as dev) to focus on your game logic rather than lower level stuff like app structure, rendering pipelines or input massaging.
    Frameworks, by their nature, may start out fairly simple, but, they tend to be kitchen-sink so they consume more and more commonality in order to increase their usefulness. Modules (or libraries) are the opposite, they take one problem and solve it, its up to you to bolt them together, this gives you flexibility but is generally time consuming.
  15. Like
    mattstyles got a reaction from Vinnyreis in JS is the best for me?   
    #AlwaysBetOnJS
  16. Like
    mattstyles reacted to gk1 in [OverKnight] Roguelike card game   
    I'm an engineer of this game.
    thank you for playing 😀
    It seems there is the cache problem with iOS's home icon sometimes. 
    if you cannot see new version, please try it with browser from URL.
    we just updated to v0.0.4. 😁
  17. Like
    mattstyles got a reaction from canvasman in Hotkeys and Keyboard layouts   
    Its about support. `keyCode` is supported everywhere (although deprecated in some browsers), `key` is only a working draft and not supported everywhere.
    https://caniuse.com/#search=KeyboardEvent This is incredibly reliable for support matrices.
  18. Like
    mattstyles reacted to quiphop in [WIP] Bumgineer Demo   
    You can buy crowbar at the dump (and also few more cool items) (btw You're  just gave me an idea to move the shop to its own screen state, thanks!) 
    Yeah, a lot of people can't pass through the first equipment update, I'm working on new location between Metro an Parking to make the game progress smoother

    Thanks!
  19. Thanks
    mattstyles got a reaction from quiphop in [WIP] Bumgineer Demo   
    Awesome
    Awesome
    I found it really hard to get started.
    I couldn't fight anyone without dying quickly, so it meant jumping in and out of the market to raid the dumpster. Is there another way to get the $$$ to improve?
  20. Thanks
    mattstyles got a reaction from 8Observer8 in How to make a multiplayer game   
    Without meaning to sound negative, how comfortable are you with JS and web programming?
    If the answer isn't at least 'yeah, I'm pretty good' then maybe don't try a multiplayer game. They are orders of magnitude harder.
    If you're going for it though:
    I'd start looking up and learning how websockets work, and really understand it. If you're familiar with pub/sub or observable patterns then they aren't super complex. The problem you always face (with any program to be honest) is dealing with the asynchronicity of events. If you get that down then you're most of the way there. It certainly isn't easy though.
    Then I'd look up server-authoritive architecture i.e. the server is where your game live, your clients (players in the browser) are windows on to that server. Then get a handle on what stuff you can/should do on the client and what stuff must be done on the server. Once you get this then you can employ the lessons learnt above (websockets) to propagate that server state to all your players.
    After that you've pretty much got the whole multiplayer thing done from a technical stand point and you can work on the really fun stuff of making your game fun.
    Oh, as with all projects, keep your scope initially super small, like, really small, as in, way smaller than you think would be viable. Get it working on that small scope, then expand outwards. You'll hopefully find that even with a tiny fraction of your 'ideal scope' that your core concepts shine through and you have the beginnings of something fun, it probably *will* be fun at that stage if your core concepts are good.
  21. Like
    mattstyles got a reaction from RetroGameDev in Best way to implement upgrades/powerups (Phaser 3)   
    I think this is an awesome question, and it the sort of thing everybody runs in to: "How to structure your application to make coding up your logic as easy as possible.".
    First up, there is 0 wrong with what you're doing. You've already split your code base up in to logical chunks: something handles bullets, something else handles collisions etc etc. That's great.
    Think how you could further split things up so that, ideally, you make changes in a minimum amount of places. Actually, with just a couple of places to change how different types of bullets (and any modifiers applied to them) are handled, you're doing pretty well already.
    There are many many different ways you could attempt to solve this problem.
    Personally, I reckon I'd start thinking more about the data structures I'm passing around and what each different aspect of my system needs to run.
    You could start structuring your data to be more descriptive about the types of things.
    Maybe a bullet entity could contain all the variables that your bullet handling and collision code needs to work such as the texture that should be set and the colour or type of any particle emitter that gets generated? Maybe there should be a variable that declares the speed?
    This way you just pass this structured object into your functions and they don't care on the specifics of what type they are, they infer what to do based on the properties of that object i.e. rather than those functions knowing that a 'flame bullet' travels at 120 and a 'exploding bullet' travels at 100, it just takes a bullet object that has a speed and uses that to set velocity. 
    Then, when you apply a 'power-up', whatever function that applies the power-up could either add the modifiers or manually change the bullet properties.
    i.e.
    var flameBullet = { speed: 120 } var speedPowerUp = { modifier: 20 } function applyPowerUp (bullet, powerup) { return { ...bullet, speed: bullet.speed + powerup.modifier } } I've used object-spread there, that's fairly new to JS, all it does it create a copy of `bullet` but then applies a new `speed` property, which takes precedence over what was previously defined in the bullet passed in. There is no need to do it like this, maybe you just store the modifier and calculate the speed later. There's no one single right answer.
    Evaluate which method best suits your needs, both of your system and you (or the team) as a programmer.
    There's also no need to use a separate function like this, maybe you like classical coding (using classes, careful with these in JS) and you want that function to live on the powerup or bullet objects, that's absolutely fine as a solution.
    It sounds like you have divided and structured your code and logic, it also sounds like maybe you just need to do this for the data that logic operates on and you'll be most of the way there to a solution that fits you.
     
     
     
  22. Like
    mattstyles got a reaction from Zenext in Best way to implement upgrades/powerups (Phaser 3)   
    I think this is an awesome question, and it the sort of thing everybody runs in to: "How to structure your application to make coding up your logic as easy as possible.".
    First up, there is 0 wrong with what you're doing. You've already split your code base up in to logical chunks: something handles bullets, something else handles collisions etc etc. That's great.
    Think how you could further split things up so that, ideally, you make changes in a minimum amount of places. Actually, with just a couple of places to change how different types of bullets (and any modifiers applied to them) are handled, you're doing pretty well already.
    There are many many different ways you could attempt to solve this problem.
    Personally, I reckon I'd start thinking more about the data structures I'm passing around and what each different aspect of my system needs to run.
    You could start structuring your data to be more descriptive about the types of things.
    Maybe a bullet entity could contain all the variables that your bullet handling and collision code needs to work such as the texture that should be set and the colour or type of any particle emitter that gets generated? Maybe there should be a variable that declares the speed?
    This way you just pass this structured object into your functions and they don't care on the specifics of what type they are, they infer what to do based on the properties of that object i.e. rather than those functions knowing that a 'flame bullet' travels at 120 and a 'exploding bullet' travels at 100, it just takes a bullet object that has a speed and uses that to set velocity. 
    Then, when you apply a 'power-up', whatever function that applies the power-up could either add the modifiers or manually change the bullet properties.
    i.e.
    var flameBullet = { speed: 120 } var speedPowerUp = { modifier: 20 } function applyPowerUp (bullet, powerup) { return { ...bullet, speed: bullet.speed + powerup.modifier } } I've used object-spread there, that's fairly new to JS, all it does it create a copy of `bullet` but then applies a new `speed` property, which takes precedence over what was previously defined in the bullet passed in. There is no need to do it like this, maybe you just store the modifier and calculate the speed later. There's no one single right answer.
    Evaluate which method best suits your needs, both of your system and you (or the team) as a programmer.
    There's also no need to use a separate function like this, maybe you like classical coding (using classes, careful with these in JS) and you want that function to live on the powerup or bullet objects, that's absolutely fine as a solution.
    It sounds like you have divided and structured your code and logic, it also sounds like maybe you just need to do this for the data that logic operates on and you'll be most of the way there to a solution that fits you.
     
     
     
  23. Like
    mattstyles got a reaction from webdva in Which hoster for WebSocket server?   
    uWS is a great choice I think, can't wait to find a good project to test the ropes on that library!
    You'd need to be able to set up and run your own server for websocket stuff, and, indeed, anything server side and I don't think you'll find a service that will let you do this without paying over some cash for it.
    Any service thats lets you own and manage your own instance will be fine, even an Amazon micro instance, which is very cheap. Amazon/Rackspace (possibly Azure, I've never tried it but heard it is also excellent) will give you the best service, prices are decent to start out with and these are the big boys making it pretty easy and painless to upgrade and attach complimentary services. Linode or Vultr tend to be a little pricey for what they offer but good service, Linode particularly is very well thought of. Heroku are still going strong I believe with good documentation and services, I always found them pretty expensive for what they offer. Digital Ocean are the current biggest bang for you buck with very cheap services that are generally good (and documentation is superb), I have a number of DO instances running and never had any issues with small to moderate loads.
    You tend to get what you pay for but $5 to $10 a month will get you plenty to play with and get set up, most proper service providers offer painless routes to upgrade (all mentioned above) as and when you need.
    If you're getting started then I'd recommend Digital Ocean or Linode (from personal experience), if you're willing to get your hands a little dirtier and want to do more then Amazon (AWS).
    Google Cloud Platform probably deserves a mention but I found it a little bewildering (read, time consuming) to do stuff with, the same can be said of Amazon/Rackspace/Azure as the list of services they offer is astounding.
  24. Thanks
    mattstyles got a reaction from jonforum in text message dataBase and localisation manager   
    There are quite a few CSV to JSON converters and its almost always best to do it at compile time rather than run time. 
    By doing it at runtime (as you're doing) you're asking the client to do more work every time, the CSV is probably larger than the corresponding JSON payload as well so you're adding bytes over the wire and as this example is translations presumably you're blocking your game/app from working until you have them so bytes are important.
    You're also sending every translation you have to everyone, in most cases this is extremely wasteful and would quickly become prohibitive. Many times you can use separate urls for different languages and only ship those translations that url (instance) needs. When you do need multiple languages in the same app/game, it might be worth loading one upfront, then loading the others if the user requests them, most of the time they won't, they certainly won't want all of them.
    So it probably best to have a process that takes your spreadsheet and converts it to the payloads you need and then just load (on the client) what you need.
    Pretty sure there are a number of different free tools that would do this sort of thing for you, and structure things like pluralisation and number handling for you also. The spreadsheet is a good starter, and it'll get you quite far, but there are better ways.
    For those interested in localisation it's worth googling i18n for several approaches.
  25. Like
    mattstyles reacted to Marcus in How do I get a sprite to move towards the mouse?   
    // create a new scene let gameScene = new Phaser.Scene('Game'); // set the configuration of the game let config = { type: Phaser.AUTO, // Phaser will use WebGL if available, if not it will use Canvas width: 640, height: 360, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 } } }, scene: gameScene }; // create a new game, pass the configuration let game = new Phaser.Game(config); var score = 0; gameScene.init = function() { this.playerSpeed = 1.5; } // load assets gameScene.preload = function(){ // load images this.load.image('background', 'assets/background3.png'); this.load.image('background2', 'assets/background4.png'); this.load.image('player', 'assets/player.png'); this.load.image('up', 'assets/up.png'); this.load.image('down', 'assets/down.png'); this.load.image('left', 'assets/left.png'); this.load.image('right', 'assets/right.png'); }; // called once after the preload ends gameScene.create = function() { // create bg sprite let bg = this.add.sprite(0, 0, 'background'); let bg2 = this.add.sprite(0, 0, 'background2'); // change the origin to the top-left corner bg.setOrigin(0,0); bg2.setOrigin(0,0); this.up = this.add.sprite(575, 15, 'up').setInteractive(); this.down = this.add.sprite(575, 85, 'down'); this.left = this.add.sprite(540, 50, 'left'); this.right = this.add.sprite(610, 50, 'right'); // create the player this.player = this.add.sprite(25, 50, 'player'); cursors = game.input.keyboard.createCursorKeys(); /*this.input.on('pointermove', function (pointer) { if(pointer.isDown){ this.player.x = pointer.x; this.player.y = pointer.y; } }, this);*/ this.input.on('pointerdown', function (pointer) { if (pointer.isDown) { this.player.moveTo(this.input.x, this.input.y) console.log(this.input.x) } }, this); }; // this is called up to 60 times per second function update() { } // end the game gameScene.gameOver = function() { // restart the scene this.scene.restart(); } Here's my code at the moment, maybe i can do an if statement such as: if mouse pressed and mouseX > playerX: playerX += playerSpeed?