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.
Related
In Adobe XD, I have a dashed Path (or Line) that I need to animate. In other software, I've always done this by animating the path's dash offset (its "phase"). In Adobe XD, this property exists but is not exposed through the user interface.
I've done some digging and found in the plugin API that Line and Path derive from GraphicNode, and that they both have a strokeDashOffset property.
I've made a quick plugin that prints and sets these values, using something along the lines of:
function animateLineDashCommand(selection) {
let linesAndPaths = selection.items.filter(el => el instanceof Path || el instanceof Line);
linesAndPaths.forEach(el => {
el.strokeDashOffset = 10; // Or whatever test value I'm using.
});
}
This works just fine, and the path definitely changes its phase. However, if I place the same line on two different Artboards with different phases, then wire them together using Auto Animate, the property is ignored. I'm assuming that behind the scenes, this property isn't interpolated.
Does anybody know of a way to have this property animate and/or an alternative solution to path offset animation in Adobe XD? To my knowledge, animated SVGs or GIFs are not currently possible.
Thanks.
Update 1:
I have tried a manual frame-by-frase approach inside of a Component, where each state is essentially a frame with a different dash phase. The idea was to make the Component a contained timeline so that the animation could be reused in different Artboards. However, Components do not support the Time trigger, which means it can only be forwarded by an interaction (clicking, dragging, etc). This approach will not work.
Update 2:
Since Artboards do have access to the Time trigger, I can duplicate the Artboards as many times as I need frames, and have each containing path have its dash phase set accordingly. This works but is quite painful as it can require a large quantity of duplicated Artboards, which I want to avoid. There is also a performance penalty for animating between dense Artboards quickly.
I have made a quick GUI plugin to make this easier and uploaded it to GitHub. I'll keep this question open in case a better solution is found.
I aim to create this pattern of game play with one main Lobby Scene and other GameScene opening through window.open.
But even when i try this with empty hello world project to open multiple window, I get restricted due to high drop in FPS.
So basically I need to know is this setup possible in cocos creator , that can even four windows render simultaneously without FPS taking a hit.
Any guidelines if any can be provided to help achieve this will be appreciated.
The game in reference pic i think is made via angular ,maybe thats why it is so smooth even after ten windows.
My team posted issue on cocos2djs but no help :- https://discuss.cocos2d-x.org/t/help-regarding-multi-window-game-in-cocos-creator/42688
After a little bit of dig-in and according to your answer in the comment, I think you can try a different approach "split-screen game". I believe when a new window opened it use the same assets and it drops the FPS.
I don't know what is the best practice for "split-screen game", but I have one suggestion on how to implement it:
Create a prefab template of the main screen.
Create different layers (node) for each screen
Add the prefab to the layer, for example :
layer with 1 screen - 1 prefab
layer with 2 screen - 2 prefabs (duplicate prefab)
etc.
If you move between screens (layers) don't forget to make active false to the last node and destroy all his children.
Also, I think your drop calls it a little bit high for even one window app, Try maybe to check it also.
I hope I helped you.
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.
http://www.famitsu.com/freegame/tool/chibi/index1.html
I want to build a character generator exactly like this one. Someone suggested me that it'd be easy to use a canvas library, followed by low level JavaScript programming. Some said I don't need canvas and can do it easily with JavaScript. Since I've only learnt core JavaScript so far, hence I really don't have any knowledge or idea about this scene. So can you suggest me where and how to start this project of mine? And what are the required languages I should acquire first before jumping onto this project?
The components of an interactive, graphic application:
Something on which to draw (canvas)
Something to draw (graphics)
Looping drawing logic (animation loop and how to throttle it)
The game/application's functionality (game loop)
Interactivity (event listeners that can react to key presses, clicks, etc.)
Sound effects and music
These things are the basic building blocks of any interactive, graphic application.
JavaScript is a great language to use when starting out (or even beyond that) because the same concepts apply here as anywhere else, but you can save your code, and run it in your favorite browser!
Here's a Tetris example I've been working on lately in JavaScript that draws the board on an HTML5 canvas. It may seem a little complicated and overwhelming, but all the pieces are there that I've discussed (except for sound =/).
Just for reference, the tick function is my main animation loop. It runs as fast as the window will return animation frames, which is usually quicker than necessary. Once the tick function is called once, it will continue to run until explicitly stopped.
Tet.prototype.tick = function()
{
var _self = this; // needed for next step
// This line is what will make this function run repeatedly
this.requestId = requestAnimationFrame(function(){_self.tick()});
// Get some time information
this.tickNow = Date.now();
this.tickDelta = this.tickNow - this.tickThen;
// If it's been long enough, and it's time to draw a frame...
if (this.tickDelta > this.tickInterval)
{
this.tickThen = this.tickNow - (this.tickDelta % this.tickInterval);
// Run the game loop
this.doGameLoop();
// Draw the updated board
this.renderer.drawBoard(this.data, this.curPiece, this.curPieceGuide);
}
}
Game making can be intimidating at first, because it seems there are SO MANY pieces that need to be understood before you can accomplish what you see in your head, but if you take the concepts one-at-a-time, and start small, you'll be making crazy stuff in no time!
I'm working on a card game project, and one of the issues I'm facing right now is animations. I just can't figure out how to animate the card properly so that both users see it animate at the same time, and for the right position. And by that I mean, when your opponent draws a card, you see an animation of a card from the opponent's deck into his hand while for the opponent, the animation is from his deck into his hand.
I've tried using jQuery animations, and I could only do one part of the animation - couldn't represent the opponent's animations.
I've also tried some of Atmosphere's packages, but they didn't work the way I wanted.
The cards collection from which I'm trying to animate has a place field for the card (hand, deck, drop..etc). And each element in the HTML depends on the place field to get the cards from, so for example:
Template.playerHand.cards = () ->
Cards.find {userId: Meteor.userId(), place: "hand"}
and the HTML is:
<ul class="holder">
{{#each cards}}
<li><img src="{{card.image}}" /></li>
{{/each}}
</ul>
would it be possible to animate the card depending on the previous place?
like if a card was in the deck, then it moved to hand, a specific animation will run. Same for from hand to deck.
Thanks.
It's hard to diagnose this with so little code to go by, but I'd guess that something like this is happening:
Player A draws a card:
Player A sees an animation almost instantly. This is because whatever code is called when a card is drawn (e.g., an update in the Cards collection) is simulated client-side for Player A, which triggers the animation immediately before the server even knows that the card has been drawn.
Player B sees an animation after a few seconds. This is because Player B needs to wait for the card-drawing code (the update in the Cards collection) to sync from Player A's browser to the server, and then back down from the server to Player B's browser.
If this is the reason for the variation in animation times, then the solution is to prevent Player A's browser from simulating the database update that triggers the animation. In other words, the first machine to learn of the card-drawing should be the server, which syncs that news down to both players at roughly the same time. There are two ways to accomplish this:
Use this.isSumulation within the function that updates the database when a card is drawn. Basically, keep the database-updating code within a block like if (!this.isSimulation) so that it executes only on the server.
Have the drawing of the card be achieved via a Meteor method. So Player A would draw a card, which causes Meteor.call("drawCard") which would then cause the drawCard method to execute on the server. (The userId is sent along within this). Define the drawCard method in a file in the /server folder or within a Meteor.isServer block so that the clients can't see its code, which therefore means they can't simulate it.
Either way, the database update happens on the server first, then gets synced down to all clients more or less at the same time, which should trigger the animations at about the same time.
If the reason that the animations are happening at different times is because your clients are at dramatically different speed connections (i.e. one on broadband and one on a cellphone) then a whole other set of compensation techniques are needed . . . but since this was posed as a Meteor question I'm assuming your problem is Meteor-related and not a general networking issue. If I'm wrong feel free to edit your question and I or the community can post some lag-compensation techniques for Meteor.