I'm messing around with Phaser 3 in an es6 syntax. In Phaser 3 everything is now composed of Scenes, where you load/update/etc everything. So, for the primary Game scene, I extend Phaser.Scene.
export default class Game extends Phaser.Scene {
preload()
create()
...
But let's say I have a player, which will involve 100's of lines of code that I would like to keep in a separate file for code cleanliness. How do I organize that?
Every tutorial/info I find about it just includes all of the code for the scene in the same file, but this is obviously not realistic for fully fleshed-out games. I want to separate many elements of the game into their respective classes/files.
So, I just create a player class, that doesn't extend anything? Or should I extend it by something like Phaser.Sprite?
I think the reason most tutorials throw everything in one file is because:
they're geared towards beginners, who may be experiencing programming for the first time and therefore might get confused by working with multiple source files
fun games in Phaser can definitely be created in one source file
some game hosting platforms want/prefer a single JS file
To answer your specific question "So, I just create a player class, that doesn't extend anything? Or should I extend it by something like Phaser.Sprite?", it depends.
I'm working in TypeScript, so my structure and code is a bit different, but I have a src directory structure like the following:
assets
ts
Prefabs
Scenes
Game.ts
In the ts/Scenes directory I throw all of my scenes, that extend Phaser.Scene. In the ts/Prefabs directory (prefabs is something I picked up years ago from a Phaser 2 tutorial) I put any custom classes.
Looking at the game I'm working on now, I have one that extends Phaser.GameObjects.Group, three that extend off of that custom object, and then a couple that don't extend off of anything. In the past I've extended off of Phaser.Sprite as well.
The real question of whether to extend off of Phaser.Sprite or not is based upon what you want the object to do for you.
In my case I wanted to create a basic Character class that my Hero and Monster instances could extend, and that would create sprites within the game when I created them. I opted for a Group because the sprites I'm using consist of two parts, so with a Group I could add both Sprites to it when I created the object, but could have gone with a Sprite had I just needed one asset.
One of my other custom objects just stores information about the game state, so since there's nothing that actually needs to display in game when it exists, it doesn't extend anything in Phaser.GameObjects.
So the question for you is, when you create a new Player, do you want it to display as a Sprite with additional functionality/properties, or not? If the former, extend Sprite (or whatever Phaser.GamesObjects you need to. Otherwise don't.
Maybe you can try nkholski/phaser3-es6-webpack.
I'm currently developing a game this way.
Related
How about Internet users? I am new to the forum and I have a very small javascript tour, perhaps my problem was that as soon as I entered javascript a friend was teaching me React.
Sorry for my bad English, I'm Spanish-speaking.
I suppose that many have already touched on this topic but I want you to clarify my doubt that if you can or not, to start with phaser I have more or less a week I did a lot of practices and everything was fine, but when I decided to create a platform project myself Example they have in phaser but in es6 and typescript I wanted to implement the philosophy of react separating the project into pieces in such a way that the code can be reusable, for example, if I need another button, I simply reuse the component that generates the button.
All good so far, my question is the following I want to create a class of "Player", if I am not mistaken more or less this is the code to implement.
class Character extends Phaser.GameObjects.Sprite {
constructor(config) {
super(config.scene, config.x, config.y, "character");
//keep a reference to the scene
this.scene=config.scene;
config.scene.add.existing(this);
What I want is to know if I can place the image loads (preload) within that code, and the same movement mechanics (update) because what I have even understood is that for each scene it seems that you have to reload the images and as I said my idea is to reuse the codes creating class, I do not know if this is the correct idea, but I have been trying and I do not achieve anything, I have reviewed the example and I only see that they create the class alone without loading images and mechanics on the outside and they put everything in a file making it tedious, I repeat the attempt to implement the react philosophy and in order not to waste much time I ask them if I can achieve such a thing.
In theory I want to achieve something like this, "WARNINGi" is just an assumption I know the code is wrong. Really thank you for your time I hope you can clarify my doubts and I hope you are well. :)
class Character extends Phaser.GameObjects.Sprite {
constructor(config) {
super(config.scene, config.x, config.y, "character");
//keep a reference to the scene
this.scene=config.scene;
config.scene.add.existing(this);
}
// load images
preload ()
{
this.load.image('character', 'assets/sprites/character.png');
}
update ()
{
// player movement mechanics
}
}
export default Character;
Depending upon the complexity of your game, generally you can just preload all of your assets before the game loads. If you only have one scene for your game, you could add the functionality to load the assets in that scene's preload, otherwise if your game consists of multiple scenes (like a splash screen, main menu, main game, game over screen, ...) you may want to create a scene to preload your assets (often this is signified by a loading screen with a progress bar).
Either way, you definitely do not want to preload the assets in your sprite, do it in your scene.
class Preloader extends Phaser.Scene {
preload() {
// Sets a default path, making your code a little smaller if you default to using an assets directory.
this.load.path = "assets/";
this.load.image("character", "sprites/character.png");
// ...
}
}
Once you preload assets they're available until you close out of the game, or programmatically remove the assets.
That means you can keep super(config.scene, config.x, config.y, "character"); in your Character constructor, and drop the preload() entirely.
First of all, the question should be a bit bigger but that is the main point, I guess.
Let me explain a little of what I want to do so you can have a better idea. Basically, id like to make a card game (no 3D nor 2D graphics), just a basic form where I have a deck of cards loaded in memory. After playing a card i'd like the form to update some information (labels, images, or X behavior) based on the card's effect, however, I don't want to hard code the card interactions/effects within the card control, I want to get all that from a script (for example a lua script). For example:
I have a script named "0001.lua" and it has 2 effects coded;
Deal 2 damage to opponent.
Deal 4 damage to opponent and destroy this card.
In the game I draw a card with ID 0001 and play it. When right clicking the control that works as a card, id like to display a list the effects in the script and depending on the chosen option to execute the selected function inside the script and update the information in the form (if it was effect 2 - deal 4 damage and destroying the control/card).
with all this in mind id like to ask the following questions:
How can i achieve something like that?
Is that called "embedding"?
In the information I mentioned lua as the scripting language but I don't know if that is the simplest scripting language i can use to do this, is there a simpler scripting language? I would like to keep it as simple as possible.
Can anyone provide an example to do something like this? I'll greatly appreciate it (it's okay if it's simple, I just want to know how to accomplish the back and forth communication between the script and c#)
Also, c# is no a requisite. I just mentioned c# because I feel comfortable coding in it. If there is another language more appropriate for this task i'm open to suggestions.
I think that it is much more simple to use C# scripts from C# than lua.
Check out these questions
[1],
[2].
Note: Don't forget about namespaces. If you want your scripts classes to inherit your classes or interfaces from main application, then your scripts should use same namespace.
I have been trying to create complex JavaScript shapes (to the end effect of functioning gauges). However, this is a very slow process when creating each individual part programmatically.
I was hoping to find some way to do this more effectively than this. Adobe Animate looked hopeful, but it is very overkill for what I need. I was hoping that there was some software or method to creative JavaScript shapes more effectively than writing each piece of code.
Thank you for any advice you may have.
I guess you mean Canvas since you said JavaScript shapes. I've used htmlcanvas studio for another project and it seemed ok. Have a look here http://www.htmlcanvasstudio.com/
Once your shape is created. Include it into a function so this way you can new the same shape over and over again. It may also be an object of course. Then you can create instances of it with Object.create(square) for example.
function someShape () {
// paste generated code
console.log('your shape has been created');
}
const shape = new someShape();
// or
new someShape();
Afternoon. I have an FLA with a single MovieClip on the stage - the clip is named myThing in the Library and also has an instance name of myThing. On another layer I have the following script:
this.myThing=this.getChildByName("myThing");
console.log(this.myThing);
When I run this in a WebGL project it works as I'd expect and returns a JS object but when I run the same thing in a canvas project (which is what I need to use) it comes back null.
Initially, can anyone explain what the difference is between a WebGL and a canvas project in Adobe Animate CC and how I can get a reference to child clips to control their timelines?
Along with that, can anyone point me to any decent resources on scripting these projects? It seems like no matter what I search for I always end up back at that *!#%£¡ rabbit tutorial that manages to cram very little info into an awful lot of words.
Thanks all, your help is always appreciated :)
So I was being a numpty.
The name property of any asset defaults to null. This is not a problem because the getChildByName() method is not really necessary (for me at least) once I realise that you can just call this.someChild.someMethod().
I got hooked up on the wrong approach because it was the only one I could find examples of. I'm still finding documentation very sketchy and not very helpful when compared to AS3 or even competing JS libraries like Greensock
Also not sure why my first approach worked in WebGL but not canvas. Ah well, onwards and upwards...
WebGL and HTML5 Canvas documents work somewhat differently in Animate CC.
In WebGL, symbols having instance names are accessible as follows:
var mySymbol = this.getChildByName("instance-name");
In Canvas, the same can be done as follows:
var mySymbol = this.instance-name;
Unnamed instances can be referenced using this.getChildAt(index) in both canvas and WebGL.
Once a reference to the required instance is obtained, you can easily control it as desired. (gotoAndPlay()/Stop() etc.)
PS: In canvas, Symbol-instance names are not explicitly set as name properties of corresponding symbols in the output - hence the name property is returned as null.
I need some help working out the class hierarchy for a game I'm developing with JavaScript. The game is a top-down space shooter with (at its basic level) a background, player, bullets and enemies.
I've come up with a class diagram which I think needs to be improved on:
Nothing out of the ordinary here, the main class is called Cosmos (the name of the game) which has a tick() method which fires at roughly 60 times per second. The Background, Player and Enemy classes belong to Cosmos and the Bullet class belongs to the Player class, because a Player "owns" Bullets.
There is one major problem that comes to mind with this diagram though, and that is how I'll do collision detection between the players bullets and the enemies. I could write a method in the Player class to pass a bullet's x and y to Cosmos and do the collision detection in Cosmos, but that doesn't seem like the best way to do it. Would doing the collision detection in Cosmos be okay if I'm going for a neat, organisable approach?
Any other modifications you could make to make my life easier is also greatly appreciated.
Your diagram seems to have some issues. You wrote:
The Background, Player and Enemy classes belong to Cosmos and the Bullet class belongs to the Player class, because a Player "owns" Bullets."
This suggests an aggregate or composite relationship, but in your diagram you use inheritance arrows... You have Player extending Bullets, and multiple inheritance on Cosmos, which extends Player, Background, and Enemy. Also, your diagram is upside down; generally base classes go at the top.
If you want to use inheritance chains, consider something like this instead:
The job seems way too small for worrying that much about class hierarchies.
In any case, Java-style classes is just one way of segregating code, keeping a reasonable order and appropriate comments can do virtually the same thing.
In short, just put Bullets directly below Cosmos, it is not that big a deal.