jfhs

Members
  • Content Count

    20
  • Joined

  • Last visited

About jfhs

  • Rank
    Member

Contact Methods

  • Website URL
    https://steinbeck.it

Profile Information

  • Gender
    Male
  • Location
    Germany
  1. This should throw an error because toggleSelection isn't defined and/or because the 'option' object doesn't have an 'events' property. I think what you actually meant here is 'option.button.events' instead of 'option.events'. Also, you've put the 'toggleSelection' function inside the 'option' object, so you can't just reference its property name as a variable. Instead, you need to use the reference to the 'option' object like so: option.button.events.onInputDown.add(option.toggleSelection.bind(option), this);Please note: I'm not a Phaser user, and the documentation page for events doesn't really explain what kind of 'this' should be used as the second argument to .add(), but if it is the context of the callback, then you could also do it like this: option.button.events.onInputDown.add(option.toggleSelection, option);In JavaScript, when you pass a function around that uses 'this', you need to bind it to the object it belongs to because the 'this' context will be lost otherwise. It's a quirk in the language many people learning it stumble over. It means that when you call the method like this: option.toggleSelection();Then 'this' in 'toggleSelection' references the 'option' object. But if instead you pass the method to a function or assign it to a variable like so: var toggle = option.toggleSelection;toggle();Then 'this' in 'toggleSelection' doesn't point to the 'option' object anymore. Every function in JavaScript is also an object that has a .bind() method. This method creates another function that does exactly what the original function does, but it makes sure that 'this' inside the new function points to the right object. In your code, it's also possible to avoid using 'this' altogether if you write 'toggleSelection' not as a method but as a simple inner function of your 'createOption' function: var option = { // ...}function toggleSelection () { option.selected.visible = !option.selected.visible;}option.button.events.onInputDown.add(toggleSelection);You can reference 'option' inside the 'toggleSelection' function, because in JavaScript, inner functions (that is, functions defined inside of other functions) have access to the outer function's variables. This is called a 'closure' because the inner function 'closes over' the variables of the outer function. If you write your 'toggleSelection' function like this, it doesn't matter what the 'this' context of the function is because you don't rely on it. Please also note that I changed the 'toggleSelection' function so that it does what its name implies: toggle. The way you wrote the function in your example code it always sets the visibility of 'option.selected' to true. You can read more about closures here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures And here's a more in-depth explanation of 'this' in JavaScript: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this
  2. Hi zephiraya! That's not how you create an object in JavaScript. You can use a literal to define an object like this: var button = { sprite: someSprite, correctAnswer: true, selected: false};You can write a function that creates and initializes the objects for you:function createOption (id, x, y) { var option = { id: id, button: game.add.sprite(x, y, "option" + id), selected: game.add.sprite(x, y, 'selected') }; option.button.anchor.set(0.5); option.selected.anchor.set(0.5); option.button.inputEnabled = true; option.selected.visible = false; return option;}Why is this better? Because you have less duplicated code: if you want to change something about all options, you now have only one place to look for. You have more than one of the same kind of object, so it's probably a good idea to put those in an array instead of having variables for each: var options = [ createOption(1, game.world.centerX - 200, game.world.centerY), createOption(2, game.world.centerX + 200, game.world.centerY)];Why is this better? Because when you want to do something with every button, you can now do it like this: options.forEach(function (option, index) { // option is the current item in the array, // index is the offset of the current item // inside the array (options[index] === option)});There's a lot of other things you could do to make the code better, but listing them all here would take ages. E.g. you probably should have your questions and answers in a separate data structure as well. This way you can load them from a JSON file and if you want to add a new question, you can just add it to the JSON file without changing your code. Also, your "option1selected" and "option2selected" are no variables because you forgot the "var". What you did there was create attributes of the global object instead. That's a no-go because it can lead to hard-to-find bugs. Please also do yourself and others a favor and indent your lines correctly. I would advise you to use a JavaScript linter to check your code. Not only will it find potential bugs for you, but you can learn a lot about writing better code. You can use linters online, integrated into your editor or from the command line. One of the most popular linters is JSHint:http://jshint.com/
  3. jfhs

    visual studio code

    @shohan4556: Visual Studio Code just recently added the possibility for extensions, so I don't think there's anything specifically for Phaser available yet. Here's the marketplace for VS Code extensions: https://marketplace.visualstudio.com/#VSCode Here's some information on how to write extensions if you'd like to roll your own: https://code.visualstudio.com/docs/extensions/example-hello-world
  4. jfhs

    visual studio code

    I've been using VS Code for some months now and I'm quite happy with it. I used Brackets before that but it was rather sloppy even on my quite fast machine, a problem VS Code doesn't have. Also, VS Code's IntelliSense is much smarter than anything I've ever seen in Brackets, and the linter finds type-related bugs even if you don't use TypeScript (although it does have some "false positives" sometimes). I'm certainly not a Microsoft fan (have been using linux as my main OS since at least 2006) but even I had to admit that VS Code is quickly becoming one of the best editors for JavaScript stuff.
  5. Hi IHateThisMap! You are passing no "this" context to .forEach(), but use "this" in the callback. Does it work if you change it as follows? Look at the last line here: group.forEach(function(enemy) { enemy.animations.add('fly', [0], 20, true); enemy.animations.add('hit', [0, 1, 0, 1, 0, 1, 0], 20, false); enemy.events.onAnimationComplete.add(function(e) { e.play('fly'); }, this); }, this);In JavaScript, a function defined inside another function doesn't automatically have the parent function's "this" reference. If you want to force a function to have a context, you have to .bind() it to a context like so: function () { /* ... */ }.bind(context)
  6. You can use JavaScript objects as namespaces or use a module system. If you go the namespace route, you'll have one global object containing the parts of your application. Your gui.js file could then look like this for example: if (typeof GAME === "undefined") { var GAME = {};}GAME.gui = (function () { // define some GUI functions here function doSomeGuiStuff () { GAME.other.doSomeStuff(); // ... } return { // Put the functions you want to be "public" into this object: doSomeGuiStuff: doSomeGuiStuff };}());This approach uses only one global variable (GAME) which is much better than having everything globally, but you always need to include your script files in the right order if one file depends on another file. This can get frustrating if your code gets bigger and you use more and more files. Therefore there are so-called module systems that help you with this, like require.js or using.js (disclaimer: this is my own library). In these libraries you either have a specific folder structure or a file that tells the module system where to find your modules. In using.js, you would include the using.js file and a file containing the script paths in your HTML file. The paths file can look like this: // File "paths.js"(function () { // This assumes you have using.js in your main directory // and your scripts in a subfolder of the main directory // called "js/" var base = using.path + "js/"; using.modules.gui = base + "gui.js"; using.modules.player = base + "player.js"; using.modules.other = base + "other.js"; }());// File "gui.js"using("other").define("gui", function (other) { // Define your GUI functions here, using some stuff from the "other" module function doGuiStuff () { other.doSomeStuff(); // ... } return { // Put all the functions you need to use somewhere else into this object: doGuiStuff: doGuiStuff }; });If you're only developing a simple game, the namespace objects will suffice. For anything else you should probably read up on module systems. The important thing here is that you don't use global variables as advised in another answer because it can lead to hard-to-find bugs, especially in JavaScript.
  7. Awesome graphics, really nice job! Performance could be better (Core i7 Quad + 16 GB Ram + some onboard graphics chip, Chromium). Unfortunately, the fonts are not readable for me (see attachment). There also is a bug: When I start the game I cannot use the arrow keys to move the screen. It only works after using WASD first... Hope that helps!
  8. I think there's an important distinction to make here: There's libraries on the one hand and frameworks on the other. A library is something you use in your code so that you don't have to do something yourself (or do it again), but it doesn't dictate how you have to write your code. Frameworks are similar to libraries, but they force you to make compromises in how you structure your code. Therefore, frameworks can lead to something called "lock-in". This means that if you later decide, for whatever reason, that you want to use another framework, you'll have to rewrite pretty much all of your code. There are some people who think it's actually a good idea to adhere to the way a framework forces you to write your code because it might lead to a better overall structure. So in a way, this is certainly a matter of taste as well. Having said all that, if what you want to do is develop a simple game with a well-defined feature scope and you know that you'll just leave it as it is once you're finished with it, a framework doesn't impose the same burden as it would in a project where you continue to add features for years to come. You have to keep in mind though that every framework imposes a learning curve and that sometimes you have to invest so much time into learning a framework that it would be better to just write your code without it. Personally, I avoid using frameworks whenever possible and opt to use libraries instead. That's why I usually prefer things like Pixi.js to full-blown frameworks. I should also mention that what many people do is build their own "framework" for use in later projects. There's nothing wrong with that as long as it doesn't eat up all your time. These custom "frameworks" have the benefit of working exactly the way you want them to work.
  9. No, I actually don't use ES6 yet. Why? Because I don't need most of the features it adds. Classes? It's just another syntax for what you can already do. Promises? I already use those with a shim. Tail-call optimization? I won't get this from a transpiler... And the few other things I'd like to use from ES6 (default arguments, arrow functions etc.) are not important enough for my taste to justify the added complexity of using a transpiler.
  10. In JavaScript, you could just do this: var house1 = { living_room: { chair: new Chair(), chair2: new Chair() }};Although your example raises the question why you don't just use an array if you have more than one thing of the same "type", as is the case with your chairs: var house1 = { living_room: { chairs: [new Chair(), new Chair()] }}
  11. If you want to use something like: var leaderBoard = new LeaderBoard(containerElement, "/my-leader-board-content/");You have to create a "class" that abstracts away the details of requesting the leaderboard data: // This example assumes you are using jQuery for the AJAX request, but you// can use any other library for this or even roll your own with XMLHttpRequest.function LeaderBoard (parent, url) { // Create an element to contain the leaderboard: this._container = document.createElement("div"); // Add it to the parent element: parent.appendChild(this._container); // Fetch the leaderboard data: $.ajax({url: url}).done(this.update.bind(this));}LeaderBoard.prototype.update = function (data) { // If your URL returns some HTML: this._container.innerHTML = data;};In this example, the URL should not deliver a full HTML page. Instead it would give just the HTML for the leader board, without any HTML header and stuff like that. This also assumes you get the leader board content from your own server. I'm not sure this is what you want, but your question is much too vague to answer with any certainty. It all depends on where you get the data from and in what form. It would also help to know how you organize your code... Mind-reading is not my speciality.
  12. As a rule of thumb, that is correct. That's only an issue if you actually need to remove the listener, though. For most games you'll want the resizing to take place for as long as the page exists. In this case it doesn't make an awful lot of sense to assign the listener to a variable. It's ok to break these rules of thumb if it doesn't mean you sacrifice readability or increase the chances for hard-to-find bugs. You could also argue that in this case assigning this listener to a variable would violate YAGNI (You Ain't Gonna Need It) and/or KISS (Keep It Simple, Stupid).
  13. Uncaught ReferenceError: MO5 is not defined(anonymous function) @ StageResizer.js:3Sorry, I just saw your question now. The reason you get this error is because the code snippet used my library's module system which you can find here: https://github.com/iiyo/MO5.js I updated the gist so that it works without the module system. By the way, what you wrote in your post is not the code I suggested. If you look closely, I used "myStageResizerInstance" which obviously is an instance of the StageResizer constructor, not a canvas element or anything like that.
  14. @xerver: Yes, sniffing was my solution as well. Now I'm a little confused whether I should take it out again, I probably should. I guess something just went wrong on my device, maybe the graphics unit was on vacation or something, who knows. But it seems to run pretty well either way. @Mat: Good to know it works so well there, thanks for the heads up! Awesome!
  15. Hi xerver, there once was an emulator for Kindle Fire devices but it has been discontinued. It never supported the Silk browser though, so it wouldn't have been of much help either, I'm afraid. I just tried running the Khronos WebGL conformance tests in Silk and it tells me the browser doesn't support WebGL at all and refuses to run any further tests. If that's the case, maybe you should check out how their test differs from the auto-detect in pixi? In Aurora the tests kind of work, but then the browser always tells me that a script is causing the page to be slow and the whole screen becomes black for a few seconds (even the Fire OS UI)... and then after maybe 15 minutes the system reboots. Maybe WebGL isn't supported well enough by the device and so Amazon disabled it for Silk but since Aurora (which is not in Amazon's app shop) doesn't know about it it tries to run WebGL and then fails? If that helps you could point me to a test site and I could give you the console output or something. Edit while editing: Huh? As I'm writing this I tried the examples again on github.io for Pixi v3 and now they work in Silk and PIXI.autoDetectRenderer() returns the CanvasRenderer. Maybe there was an update for Silk which I didn't get before? (Fire OS seems to update automatically without notifiying the user.) In Aurora it still doesn't work though, but it is not officially supported by Amazon, so I doubt anyone other than developers use it at all there. So maybe the problem just magically solved itself.