• Content Count

  • Joined

  • Last visited

About KungFuFlames

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hey there, My name is Martin and I am the founder of an independent game development studio called Fractal Games. We have put quite the effort into creating an all-in-one Sudoku for web and mobile. If you'd like, please do check it out HERE . The apps on Google Play and iOS are due to updated soon with the latest methods, articles, better boards and free solver. Any questions, comments or suggestions will be greatly appreciated. If there are many suggestions for a new feature, we will do our best to make it happen. Thanks
  2. I do not use physics in the game, but I found more 'native' way to do it: let render = gameScene.add.graphics(); let bounds = this.getBounds(); render.lineStyle(3, 0xffff37); render.strokeRectShape(bounds); basicly I use getBounds() method of the Sprite to get the surrounding rectangle and than you can make some graphics with it.
  3. Is there a similar way to debug visually a sprite like THIS in Phaser 3?
  4. KungFuFlames


    Game Config is pretty need, it really helps you to organize your code. Back in Phaser 2 when you instantiate Phaser you write something like this: let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); First time I saw this I wasn't sure what are these parameters for. And these are just basic parameters that Phaser constructor can accept...Which is not really good quality good overall. Now Phaser 3 simplifies this by adding a object, called gameObject. It looks like this: let GameConfig = { type: Phaser.CANVAS, width: 800, height: 600, scene: [Boot, Game], backgroundColor: "#dbcf8b", }; The order doesn't matter, some parameters are optional so you don't have to write them all. After setting up everything, just pass the object to contructor let game = new Phaser(GameConfig); So back to your question. Just make the object yourself.
  5. That's an alternative too. But I don't think CSS should handle entiry scaling of the game. For example your code won't make canvas to 'fit' into page body. Which is not a problem but most of the mobile games probably will try to cover the fullscreen of the divice. Although, this is easy to fix just by adding couple lines into CSS, from my experience so far I found that Sprites are losing quality with CSS methods. So JS is fine right now, but not really sure if this is good performance wise. this.events.on('resize', resize, this); function resize (width, height) { if (width === undefined) { width = this.sys.game.config.width; } if (height === undefined) { height = this.sys.game.config.height; } this.cameras.resize(width, height); this.bg.setSize(width, height); this.logo.setPosition(width / 2, height / 2); } Basicly the event will trigger on resize, then going to calculate 'things' based on new canvas size and will setup new size and position(or whatever) for Spirte. This whole process doesn't look very efficient for me. If you have any ideas how I can optimize it, I will be glad to hear your suggestions.
  6. Thanks for the response. I found This example really useful.
  7. I switched to Phaser 3 for almost 3 months now. I found really useful the ScaleManager in Phaser 2. I wonder is there a implementation in Phaser 3 right now?
  8. Thanks again! I came up with diffrent solution. All the cell are interactive all the time. The main point is that they hava a specific event attach to them. So wherever they are clicked I'm checking if the clicked Object has a listener with the name. Something like: this.game.input.on('gameobjectdown', function (pointer, gameObject) { if (gameObject.listenerCount('pieceInputDown') > 0) { gameObject.emit('pieceInputDown'); } }, this); and the InputEnabling look this: private pieceInputEnable(): void { this.boardUI.pieces.forEach((entryPieceUI) => { entryPieceUI.setInteractive(); entryPieceUI.addListener('pieceInputDown', this.pieceInputListener, this); })
  9. Yes, you can combine different frameworks in one HTML project. In fact, there are good reasons to do such thing. For example menus. You can totally make an amazing menu, buttons, pop-up, sliding and such in Phaser, but also you can just use jQuery. That way you can separe actual game logic from controlling menus. As for your project. check out Socket.io.
  10. The following code fragment below is a funtion which is setting up all Sprites in Array to be interactive: cellInputEnable(): void { this.boardUI.cells.forEach((entryCellUI) => { entryCellUI.setInteractive(); }) } It works perfectly later on in the eventListener. The problem is that I don't want to make all of the interactive. Let's just say that I want to make certain Sprites Interactive. So this going look like that: cellInputEnable(): void { this.boardUI.cells.forEach((entryCellUI) => { if (this.board.movementGenerator.piecesMap.get(selectedPiece).indexOf(entryCellUI.cell) > -1) { entryCellUI.setInteractive(); } }) } That's cool. Now specific ones are interactive. After some methods I generate new desired Sprites to be interactive. How about the old ones? I tested it and they are still interactive which totaly mess up the logic. Is there a way to more them "non-Interactive" Thank! Also if you have any suggestions how to make it more cleaner I would be happy to hear them
  11. I'm working on Chess game. I want the game to be extendable, so I can add diffrent type of modes: 2Players on same screen Verses AI Multiplayer Chess puzzles and other... That's why I'm trying to use MVC architecture(Model-View-Controller). Where the model is the game login, movements and core rules of the chess. The view is what can be represented in form of Sprites, Images, Colours, Animations, Tweens and so on. And the controller which is going connect the model with the view. Also I'm trying to optimize the game as much as possible so it could be mobile friendly. For example: this.board.movementGenerator.getMoveBehaviours(this.board.players[0].activePieces); This is a function part of the model, which is going to generate all the possible moves that the current player can take. This function is called only once at the start of the player's turn. By doing that I will run the algorithms for calculations only once and not every time when a figure is clicked. Thanks for your suggestions I will try to improve the code. Thanks
  12. DAMN! Thanks, thats really cleaned my code. Although I still struggling to fix something up. pieceInputHandler(): void { this.boardUI.pieces.forEach((entryPieceUI) => { entryPieceUI.setData('piece', entryPieceUI.piece); entryPieceUI.setInteractive(); }) } InputListener(): void { this.game.input.on('gameobjectdown', function (pointer, gameObject) { //Ignore the code below console.log(this.board.movementGenerator.piecesMap.get(gameObject.getData('piece').currentCell.address)[0]); }, this); } So right now based on 'piece' key/id I get the exact object thats been clicked. Which is awesome. But not I want to create a custom event that will be triggered after piece is clicked. At the console.log(...) I have all the possible cells that can piece can take.(in form of Array). My idea is to make those cell highlight with the use of "tint" property. I modified InputListener() InputListener(): void { this.game.input.on('gameobjectdown', function (pointer, gameObject) { if (gameObject.getData('piece')) { this.boardUI.destroyActiveCells(); //resets cell's colors let possibleCells = this.board.movementGenerator.piecesMap.get(gameObject.getData('piece').currentCell.address)[0]; this.game.events.on('addCellHighlights', this.cellHighlightListener, this) this.game.events.emit('addCellHighlights', possibleCells); } }, this); } Now this is the function for highlighting. Still looping...ouu I forgot to mention that I'm using the MVC architecture. I does work fine now, but if you got any suggestions I will be super thankful if you share cellHighlightListener(possibleCells: any): void { this.boardUI.cells.forEach((entryCellUI) => { possibleCells.forEach((cell) => { if (cell.address === entryCellUI.cell.address) { entryCellUI.tint = POSSIBLE_CELL_MOVE_COLOUR; } }) }) }
  13. I will try to explain my idea with the simple code: this.board.playerInTurn.activePieces.forEach( (entryPiece) => { this.boardUI.pieces.forEach( (entryPieceUI) => { entryPieceUI.setInteractive(); entryPieceUI.on('clicked', () => { console.log("Piece is Clicked"); }) }) }) So at this point I have 16 objects in the array. I want to get a specific object from the list without looping the all of them. Is there more optimized way to do it?
  14. Not 100% sure but my ideology is "If you can create something on your own, DO IT". It depends on your game and your programming skills. If you want to make something small try to code it with pure JS. But if want to make something bigger, research for the suitable framework/engine for your needs. In your case Phaser is perfect for platformers since there are couple pretty well written and documented Physics(ARCADE, P2, NINJA). So yeah, go and try it.