KungFuFlames

Members
  • Content Count

    22
  • Joined

  • Last visited

Posts posted by KungFuFlames


  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 :)

    bgl3VHe.png


  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. 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.


  4. 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.


  5. 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);
                })

     


  6. 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 :)


  7. 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 :)


  8. 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;
                        }
              })
       })
    }



     


  9. 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?


  10. 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.


  11. Hey there guys! 

    I working on chess game with Phaser 3. And so far everything is amazing. Right now I'm working on event handlers for the pieces(figures). Take a look:

     

     for(let i = 0; i < this.pieces.length; i++) {
        this.pieces[i].setInteractive();
        this.pieces[i].on('clicked', ()=>{ 
                         console.log('Piece clicked'));
                         }, this);
     }

    This is taken from the example HERE

    So my problem is this fragrament of the code:

      this.input.on('gameobjectup', function (pointer, gameObject)
                {
                  gameObject.emit('clicked', gameObject);
                }, this);

    Can someone explain the whole structure? Or maybe suggest cleaner way to do it?


  12. Hey there guys! I working on first MVC project with Phaser 3(3.4.0) with Typescript

    export class Game extends Phaser.Scene {
    
            constructor() {
                super({
                    key: GAME_SCENE_KEY
                });
            }
    
            create() {
                console.log('This is game scene');
    
                this.add.image(500, 300, BLACK_CELL_IMAGE_KEY);
                this.add.image(564, 300, WHITE_CELL_IMAGE_KEY);
                this.add.image(500, 364, WHITE_CELL_IMAGE_KEY);
                this.add.image(564, 364, BLACK_CELL_IMAGE_KEY);
            }
    
    }

    So this code fragment works perfectly. But when I try to add a image in non Scene class it doesn't work. 
     

    export abstract class UIElement{
    
            game: Phaser.Game;
            cellSprite: Phaser.GameObjects.Image;
            position: Phaser.Geom.Point;
    
            constructor(game: Phaser.Game, rowPos: number, columnPos: number) {
                this.game = game;
                this.position = new Phaser.Geom.Point(rowPos, columnPos);
                this.add.image(this.position.x, this.position.y);
            }
    
    }

    This is a part of the View that I'm working for the MVC but I can't really get away from this. 

    this.add.image(this.position.x, this.position.y);

    Any ideas?


  13. Hello guys, I'm new to game development but I have some background on HTML/CSS/JS that's why I found Phaser perfect for me. So far I'm really loving it but can't understand some basic game logics. For example: What is the best way to build platforms? I was reading about groups but not sure is it the right way to do it. Let's just say that I have sprite and I want to build specific pattern. So far I tried :

    • Every platform is diffrent sprite
    • Using single tile to build platforms

    Also is there any books or other sources for information about game logics and good practices?

    Thank you and sorry for my bad English

    Untitled.png