• Content Count

  • Joined

  • Last visited

About wiseguy12851

  • Rank

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
    Not Telling
  • Location
    Crystal Tokyo
  • Interests
    C++, C, Java, Assembly, Linux, Website Design, Game Creation, CLI, etc etc. Also lots and lots of anime >_^
  1. I'm designing a simple grid based game and had working code with moving clouds and a grid, but the code was very messy so I did a large scale refactor to clean it up. Now pretty much nothing works anymore and I've spent literally 3 hours scratching my head trying to figure it out to the point where I have exhausted all possibilities and completely given up. The backdrop renders just fine, but the grid and clouds act like I never programmed them in. Whats even more mind boggling is under any and all testing and manually scanning various breakpoints performed in 2 different browsers, Phaser is acting like everything is definitely all there, 100%, all the code for the clouds and grid are working exactly as expected, theyre being created exactly as expected, timers are running just fine, code is being reached as it should. Every single thing checks out perfectly as expected. I've scanned almost every function, even checked layers thinking it may be rendering underneath for some bizarre reason, but according to Phaser and the browser, everything is working A-OK. Yet, nothing but the static backdrop is working. I'm at a complete loss. Can anyone help me. The code provided is the refactored state code, its in typescript but most of it should be pretty self explanatory if you don't know it. /*1. init2. create3. preload 1. loadUpdate 2. loadRender4. update5. render*. paused 1. pauseUpdate*. resize*. shutdown*/export interface ICell{ x?: number; y?: number; size?: number; row?: number; column?: number; graphicsHandle?: Phaser.Graphics; spriteHandle?: Phaser.Sprite;}export class GameState extends Phaser.State{ constructor() { super(); } public init() { // Time setup this.millisecond = 1; this.second = 1000 * this.millisecond; this.minute = 60 * this.second; // Turn off all world gravity this.physics.arcade.gravity.y = 0; // Create and Setup Timers this.cellAppearTimer = this.time.create(); // Setup board grid preferences this.gridCellSize = this.yPercent(8); this.gridBorderSize = this.yPercent(.1); this.gridVisibleSize = this.gridCellSize + this.gridBorderSize; this.gridGutterSize = this.yPercent(0); this.gridTotalSize = this.gridVisibleSize + this.gridGutterSize; this.gridXStart = this.xPercent(33); this.gridYStart = this.yPercent(46); this.gridColumns = 6; this.gridRows = 6; // Setup grid cell preferences this.cellContentColor = 0xFFFFFF; this.cellBorderColor = this.cellContentColor; this.cellContentAlpha = .3; this.cellBorderAlpha = .7; this.cellRadius = 0; this.cellAppearMethod = this.rnd.pick([ "all", "row", "column", "random" ]); this.cellAppearDelayBase = 100; this.cellAppearLength = 500; this.cellBank = []; // Create board to hold all of the cells this.boardGroup = this.add.group(); // Cloud data setup this.maxClouds = 20; this.cloudEmitter = this.add.emitter( this.xPercent(-5), this.yPercent(6), this.maxClouds); } public preload() { this.load.image('oldMap', 'media/background/oldMap.min.jpg'); this.load.image('ocean', 'media/background/ocean.min.jpg'); this.load.image('log', 'media/background/treeLog.min.jpg'); this.load.image('cloud', 'media/misc/cloud.min.png'); this.load.image('earth', 'media/blocks/earth.min.png'); this.load.image('fire', 'media/blocks/fire.min.png'); this.load.image('wind', 'media/blocks/wind.min.png'); this.load.image('water', 'media/blocks/water.min.png'); } public create() { // Crete the backdrop this.createBackdrop(); // Create all the cells this.generateCells(); // Create the clouds this.createClouds(); // When thats all done present the cells this.presentCells(); } public update() { if(this.input.keyboard.isDown(Phaser.Keyboard.ESC)) { this.game.state.start("menu"); } } protected createBackdrop() { this.createOcean(); this.createMap(); this.createLog(); } protected generateCells() { // Begin creating cells for(var row = 0; row < this.gridRows; row++) { for(var column = 0; column < this.gridColumns; column++) { // Make cell var cell: ICell = this.generateCell(row, column); // Save it this.cellBank.push(cell); // then cue its appearance this.cueCellAppearance(cell); } } } protected presentCells() { this.cellAppearTimer.onComplete.add(this.cellsPresented, this); this.cellAppearTimer.start(); } protected generateCell(row: number, column: number): ICell { // Calculate the placement and size of the cell var cell: ICell = this.calculateCell(row, column); // Create the visual cell cell.graphicsHandle = this.generateCellGraphics(); // Create the sprite handle and attach the pre-generated graphics handle to it cell.spriteHandle = this.add.sprite(cell.x, cell.y); cell.spriteHandle.addChild(cell.graphicsHandle); // Attach the sprite handle to the board this.boardGroup.add(cell.spriteHandle); return cell; } protected cueCellAppearance(cell: ICell) { // This picks an animation at random for presenting the cells // Basically each cell is assigned its own millisecond to start appearing // If more than 1 cell has the same milliseconds then they appear at the same time // So this is essentially a formula to calculate that millisecond and thus create an // appearance animation // The "row" animation fades in all cells from top to bottom by giving each cell // the same milliseconds on each column but increase in numbers the further it goes // down if(this.cellAppearMethod === "row") this.cellAppearTimer.add( // For each cell, convert its row number to its millisecond time this.cellAppearDelayBase * cell.row, this.presentCell, this, cell); // The "column" animation fades in all cells from left to right by giving each cell // the same milliseconds on each row but increase in numbers the further it goes // right else if(this.cellAppearMethod === "column") this.cellAppearTimer.add( // For each cell, convert its column number to its millisecond time this.cellAppearDelayBase * cell.column, this.presentCell, this, cell); // The "random" animation fades in all cells randomly by generating random millisecond // values else if(this.cellAppearMethod === "random") this.cellAppearTimer.add( // For each cell, come up with a random value at a maximum of the possible // generate milliseconds based on total cells this.cellAppearDelayBase * (this.rnd.between(0, this.gridColumns + this.gridRows - 2)), this.presentCell, this, cell); // The "default" animation fades in all cells from top left to bottom right else this.cellAppearTimer.add( this.cellAppearDelayBase * (cell.row + cell.column), this.presentCell, this, cell); } protected presentCell(cell: ICell) { // Set the cell up to be presented cell.spriteHandle.alpha = 0; // Then present it var tween = this.add.tween(cell.spriteHandle).to( { alpha: 1 }, this.cellAppearLength, Phaser.Easing.Linear.None, true); tween.onComplete.add(this.cellPresented, this); } protected cellPresented() {} protected cellsPresented() {} protected generateCellGraphics(): Phaser.Graphics { var cell: Phaser.Graphics = this.add.graphics(0, 0); cell.boundsPadding = 0; // Setup style cell.beginFill(this.cellContentColor, this.cellContentAlpha); cell.lineStyle(this.gridBorderSize, this.cellBorderColor, this.cellBorderAlpha); // Draw cell cell.drawRoundedRect( 0, 0, this.gridCellSize, this.gridCellSize, this.cellRadius); // End cell drawing cell.endFill(); return cell; } protected calculateCell(row: number, column: number): ICell { return { x: this.gridXStart + (this.gridTotalSize * column), y: this.gridYStart + (this.gridTotalSize * row), size: this.gridCellSize, row: row, column: column }; } protected createClouds() { this.cloudEmitter.height = this.yPercent(5); this.cloudEmitter.makeParticles("cloud"); // Between 2 and 5 percent horizontal speed this.cloudEmitter.minParticleSpeed.set(this.xPercent(.5), 0); this.cloudEmitter.maxParticleSpeed.set(this.xPercent(1), 0); // Between .5 and 1 percent size this.cloudEmitter.setScale( .1, .2, .1, .2, 300, Phaser.Easing.Linear.None); // No gravity, we cant have the clouds falling to the ground this.cloudEmitter.gravity = 0; // We certainly dont want the clouds rotating this.cloudEmitter.minRotation = 0; this.cloudEmitter.maxRotation = 0; // Start the particle emitter this.cloudEmitter.start(false, 5 * this.minute, 25 * this.second); } protected createOcean() { /* * Place ocean below map so it can be overlapped. Place ocean from top * to 60% so that the ocean image isn't so squished and gives the * illusion the map is being held over the ocean */ this.oceanImage = this.add.image(0, 0, "ocean"); this.oceanImage.width = this.game.width; this.oceanImage.height = this.yPercent(60); } protected createMap() { /* * Place map above ocean so it can overlap it. Also place map at * y = 40% and extend it to bottom. */ this.mapImage = this.add.image(0, this.yPercent(40), "oldMap"); this.oceanImage.width = this.game.width; this.oceanImage.height = this.yPercent(60); } protected createLog() { // Add a log to cover up the 2 image borders, make it 2 % tall and start // at position y = 39% so it covers from 39% - 41% this.log = this.add.tileSprite( 0, this.yPercent(39), this.game.width, this.yPercent(2), "log"); } protected xPercent(percent:number): number { var _percent: number = percent * 0.01; return this.game.width * _percent; } protected yPercent(percent: number): number { var _percent: number = percent * 0.01; return this.game.height * _percent; } // Timers protected cellAppearTimer: Phaser.Timer; // Groups protected boardGroup: Phaser.Group; // Grid Preferences protected gridCellSize: number; protected gridBorderSize: number; protected gridVisibleSize: number; protected gridGutterSize: number; protected gridTotalSize: number; protected gridXStart: number; protected gridYStart: number; protected gridColumns: number; protected gridRows: number; // Cell preferences protected cellContentColor: number; protected cellBorderColor: number; protected cellContentAlpha: number; protected cellBorderAlpha: number; protected cellRadius: number; protected cellAppearMethod: string; protected cellAppearDelayBase: number; protected cellAppearLength: number; protected cellBank; // Cloud preferences protected maxClouds: number; protected cloudEmitter: Phaser.Particles.Arcade.Emitter; // Misc protected oceanImage: Phaser.Image; protected mapImage: Phaser.Image; protected log: Phaser.TileSprite; // Time protected millisecond: number; protected second: number; protected minute: number;}
  2. Sorry to revive an old thread but I've come back to this issue because I I more or less created a workaround which just got problematic and messy. I noticed there was a postRender method metnioned in the API docs but no information or link was given to it so this leaves me a bit confused and I'm taking a guess that the render method is meant for any postRender manipulation before postRender is called which I asusme is when it displays the rendered output and gives a chance to do something after its been called, although I cant find anywhere to configm that. Essentially what I'm trying to do is make the final output fit within a 4-color palette that can whimsically be changed. Any help with this would be great, thanks.
  3. Say I had a falling star and when it overlapped another falling star it would become lighter or darker or inverted or something. But only specifically over another falling star, not any other object, and only the parts that overlap, not the whole star. How would I do that?
  4. Wow I didnt see the game.scale, still new to Phaser But I need it to be flexible to any size whether it's very tiny or very large, I need to give it a container and it scale fluidly in the container but always scaling up or down from the base size. So If I pick 320x240 I want it to always proportionally stretch bigger and smaller from 320x240. I couldn't get the example you gave to scale within a given container, it seemed to prefer the entire page or no scaling at all
  5. I figured it out, For this effect you have to have 2 canvases, one of the fixed size that Phaser renders to, its not rendered with display: none. Then another one that is scaled by css into a special container monitored by Javascript. When the container changes size it resizes the canvas proportionally into that container. Then theres an outer container that controls the sizing and placement of the inner container. Upon each render call the non-visible canvas controlled by phaser is copied and pasted to the size of the main canvas. By doing it this way a phaser game can have a fixed size but be scaled to any size smaller or bigger, its stretched and shrunk depending on scale but the contents remain the same. Its also kept proportional and placed and sized wherever desired always remaining proportional and at a fixed base size. Code I used is below, base article on how to do this I referenced is here. I modified the code from the article and ran into a few glitches with it resizing smaller but not bigger but the answer to the question I had has been answered. http://pastebin.com/0HmsgNrM
  6. Im wanting to fix a game to a certain size, say for example, to 640 x 480, but allow the game to proportionally scale to any width and height smaller or bigger. Upon scaling up it more or less proportionally stretches the 640x480 game size, and same for scaling down. In other words I intentionally want it to get more pixelated when scaling up and more clear when scaling down just like stretching an image will do and I dont want it to lose proportion or reveal more of the camera (What the user sees as far as camera goes should be exactly the same) Is this possible? Thanks
  7. Thanks, I was looking for a complete Phaser approach where I would somehow get the final rendered image into a bitmapdata object and manipulate the pixels through phaser's API - but I like the context approach because its less function calls and loading / creating data meaning less overhead on each frame rendering
  8. But how do I obtain the final rendered image in the post-render render method. Which class and property has the image about to be shown? I've searched through the various classes in the API and haven't found anything yet.
  9. Hi Im very new to Phaser but I'm looking to take the final render output on each frame and pipe it through a simple pixel process function before showing the final rendered output. I'm wanting to do this for every frame, the resolution will be fairly low and the function will be pretty simple and quick so it shouldn't have any lag. Thank You