Search the Community
Showing results for tags 'OOP'.
Found 23 results
-
So, I want to create a menu for displaying the controls to my game - I will be using multiple variables, inevitably, for each control explanation. This will likely take the form of at least 5-7 variables, so instead of writing a variable out multiple times to achieve this, would constructing a new object per "explanation" be more efficient as I will have to pass this.game.world.CenterX for each one, as well as its position and its font colour, so I didn't know if it would be more efficient using OOP or not? If it would be, how could I achieve this? The heading.anchor.set part will remain the same for all "explanations", hence why I am considering implementing a more efficient way of achieving this. If I have misunderstood/misconstrued the usefulness of OOP in this, then please just say as I am still learning Phaser and OOP so I am unsure as to whether what I want to do could be done more efficiently or not. Thanks. ControlMenuState = {}; x = 480; y = 300; ControlMenuState.create = function () { this.game.stage.backgroundColor = '#6d94b5'; var heading = this.game.add.text(this.game.world.centerX, 100, 'Controls...', {fill: 'white'}); heading.anchor.set(0.5, 0.5); }
-
Let me introduce you to the Phaser Goldilocks Template. It combines everything I wanted during that first week of Phaser. This solves a few things. First, for development all code can be separated into different JS files. For production, all JS files can be combined into a single one for the fastest loading. The second thing this solves is the common scoping pitfalls I see many people encounter. So no need to use prototype as the game variable is available in each file. https://github.com/EddieOne/phaser-goldilocks-template
-
hi, Could you help me please to transform this snippet in a prototype function to have an oop object ? with pixi.js i could do it but with phaser i'm a little lost... thanks for your tips. function draw(e,game,nameA,posx,posy,wi,he,valueAlpha,anchorValue) { var e=game.add.sprite(0,0,nameA); e.x=posx; e.y=posy; e.width=wi; e.height=he; e.anchor.set(anchorValue) e.alpha=valueAlpha return e } //final drawing function drawE(e,game) { var e=[] e.player=draw(e,game,"rect",0,0,w,h,1,0) e.opponent=draw(e,game,"rect",w2,0,w,h,1,0) return e } var background= drawE(this.background, game)
-
hi, i know create an oop object with a simple graphic shape like this : // create an new instance of a pixi container var container = new PIXI.Container(); // create a renderer instance var renderer = PIXI.autoDetectRenderer(320, 480); // add the renderer view element to the DOM document.body.appendChild(renderer.view); requestAnimationFrame( animate ); var T={} T.draw = function() { PIXI.Graphics.call(this) this.beginFill(0xFFFFFF) this.drawRect(100,100,80,200) } T.draw.prototype = Object.create(PIXI.Graphics.prototype); T.draw.prototype.constructor = T.draw; var button=new T.draw() container.addChild(button); function animate() { requestAnimationFrame( animate ); renderer.render(container); } but I am lost on the fact of doing the same with an 2d array. Can you point me ? var graphics = []; for (var j = 0; j < 5; j++) { graphics[j] = []; for (var i = 0; i < 5; i++) { graphics[j][i] = new PIXI.Graphics(); graphics[j][i].beginFill(0xFF3300); graphics[j][i].lineStyle(4, 0xffd900, 1); graphics[j][i].drawRect(0,0,10,10); graphics[j][i].position.x = 40 * i; graphics[j][i].position.y = 40 * j; container.addChild(graphics[j][i]); }; };
-
//text.js above main.js in my index.html var e = function() { var style = { font : ' 36px Luckiest Guy', fill : '#F7EDCA', dropShadowColor : '#000000', dropShadowAngle : Math.PI / 6, dropShadowDistance : 6, //wordWrap : true, //wordWrapWidth : 1000, //LineHeight : 4, }; e.body = new PIXI.Text('level ',style) e.body.anchor.x=.5 e.body.anchor.y=.5 e.body.x=50 e.body.y=100 } //main.js below text.js in my index.html var stage = new PIXI.Container(); var interactive=true stage.interactive =true ; // create a renderer instance var renderer = PIXI.autoDetectRenderer(320, 480); // add the renderer view element to the DOM document.body.appendChild(renderer.view); requestAnimationFrame( animate ); var hud = e() stage.addChild(hud); function animate() { requestAnimationFrame( animate ); // render the stage renderer.render(stage); } Hi, i don't knwo how to set correctly my text.js to be used as a OOP object. I can't see my text who is hud in my main.js....why ? I take the example of a text but it could be a rectangle or something else... Thanks for your response.
-
Hi, I'm new to OOP and Phaser, and I'm writing a simple game script to learn the OOP principles. //main game function battleLevel.prototype = { battle:function () { this.obj1 = { enterMonsterMenu: function() { return console.log('enterMonsterMenu'); } }; }, } /* end OOP prototype */ //external contructor var Hero = function (warpX, warpY, game, name, life, mana, speed) { //some code }; Hero.prototype.monsterSelectUp = function() { console.log('monsterSelectUp'); //this.enterMonsterMenu(); battleLevel.prototype.battle.call(obj1); }; I want to access enterMonsterMenu() method by calling the monsterSelectUp() but I can't call it properly. What I am doing wrong ?
-
I built a simple game using phaser, but didn't use multiple game states. The game had only one screen and no states! It was all poorly done. So now I'm learning game states. In this code snippet, taken from a phaser game https://github.com/alexdantas/ludum-dare-29/blob/master/js/states/play.js, we have, for example, a line consisting of this.game.camera.setBoundsToWorld(). I know how this works, but i'm having trouble knowing who is this here. I know this in OOP refers to the "owner" of the function, but in this case, who is it? Another doubt I'm struggling with is, where does the .game.camera.setBoundsToWorld() comes from? Is it from when Phaser initializes a new state? When it start a new state, does it create a new "main state", which in this case is what the "this" refers to, and add attributes/methods to it? Like this game.camera.setBoundsToWorld() method? function Play() {} Play.prototype = { create: function() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.stage.backgroundColor = '#000'; // initialize game variables this.cash = 0; this.chunkGroup = this.game.add.group(); this.nextChunkY = 0; this.game.world.bounds.x = 0; this.game.world.bounds.height = 1024; this.game.camera.setBoundsToWorld(); this.lastChunkIndex = 0; this.tephra = this.game.add.group(); this.rocks = this.game.add.group(); this.gems = this.game.add.group(); this.carrots = this.game.add.group(); this.lastChunk = null; this.chunkIndex = 0; this.generateChunk(); this.generateChunk(); }, }
-
Hi guys, I'm trying to extend the .kill() function in a prefab that extends Phaser.Sprite. I have the following code: Block.prototype.kill = function() { var killTween = this.game.add.tween(this.scale); killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None); killTween.onComplete.addOnce(function(){ Object.getPrototypeOf(Block.prototype).kill(this); }, this); killTween.start(); }; This actually seems to work - in that the tween is run and the block is 'killed', but then all hell breaks loose! The physics of the rest of the game start to go a bit nuts. Blocks disappear randomly, collisions occur with nothing... it just generally messes the whole game world up! Can anyone shed any light on this?
-
HTML5 Game Developer Im looking for a talented HTML5 Game Developer to work with our fantastic client. You will be working in a very young, vibrant and fun environment on a variety of cross-platform projects and see them from concept to delivery and beyond. Based in London, we can assist in a relocation if necessary Key Requirements for the role: Experience in HTML5 games development using DOM and canvas Passionate about games, with an understanding of game-play mechanics Well versed in OOP Practices and design patterns Knowledge of the latest libraries and frameworks Experience with using third party plugins and code and knowing when to use them Positive and self-motivated Open-minded and keen to learn Other desirable skills: Experience with CocoonJS or PhoneGap Experience with WebGL Experience with Flash, Unity or C++ Experience in general digital media asset production If you want to discuss this role further, Dont hesitate to give me a ring as soon as possible. Nixi Jhakra DDI: 0044 (0) 203 056 5960 EMAIL: [email protected] Job Type: Full-time Salary: £70,000.00 /year Required education: Diploma/Certificate
-
Hello, this is my first topic on this board. I'm coding a simple BreakOut clone in TypeScript. My app consists of a main BreakOut class and the instances for Ball, Paddle and the canvas context. BreakOut.ts /** * Created by Nomid on 20/01/2016. */ /// <reference path="GameObject.ts"/> /// <reference path="Ball.ts"/> /// <reference path="Paddle.ts"/> /// <reference path="Direction.ts"/> /// <reference path="Sprite.ts"/> /// <reference path="Key.ts"/> class BreakOut { Ball : Ball; Paddle : Paddle; private pressed_keys : { [keycode: number] : boolean }; update(time: number): void { this.context.fillStyle = "red"; this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height); this.Ball.update(time); this.Paddle.update(time, this.pressed_keys); } updateKeys(E: KeyboardEvent) { this.pressed_keys[E.which || E.keyCode] = !this.pressed_keys[E.which || E.keyCode]; } constructor(public context: CanvasRenderingContext2D) { this.Ball = new Ball(context); this.Paddle = new Paddle(context); this.pressed_keys = []; window.addEventListener("keypress", this.updateKeys); window.addEventListener("keyup", this.updateKeys); } } It compiles without errors, but when I run it, these errors appear: BreakOut is initialized as follows: // jQuery 2.2.0 $(document).ready(function() { var Canvas = $("<canvas/>") .attr("width", window.innerWidth) .attr("height", window.innerHeight) .appendTo("body"); window.Game = new BreakOut(Canvas[0].getContext("2d")); window.requestAnimationFrame(Game.update); }); Thank you for helping me.
-
Hello everyone attached is my current running code, https://dl.dropboxusercontent.com/u/9791999/WorkingCode.zip I tried to separate and make it more organized and more readable, I don't have any problems in Typescript (no compiling problems) but when I run it, it through run time error Uncaught TypeError: Cannot read property 'stars' of undefinedHere is the non working code :S https://dl.dropboxusercontent.com/u/9791999/NotWorkingCode.zip Any help plz, The only difference I made a new class called StarEntity and just capsuled everything in it
-
So I have 2 classes. A & B. When a specific event occurs in A, a method in B is called. I don't want to create objects in the classes. How else would you do it? -
Greetings people smarter than myself. This is my first phaser self-guided exercise. I'm also very new to object oriented programming - and that may be the issue at hand. I have a single gamestate, "playgame", which has a placeTiles() function that I don't want to execute until a user clicks a "Begin" button. However, my code is not working as intended because the placeTiles() function is executing immediately upon loading. I think there is a fundamental concept that I'm missing. As you can see, I'm using preload, create, then some of my own - placetiles, showtile. Is it SOP for all of the functions inside playGame.prototype to run on initialization? If I don't want something running at that time, how do I prevent it or where should I move that block of code? Wouldn't it need to go within playGame somewhere? playGame.prototype = { myMoney: null, theEmpire: [], preload: function(){ game.stage.setBackgroundColor(0xEBEBFF); game.load.spritesheet("gadgets", "gadgets.png", tileSize, tileSize); }, create: function(){ // I've removed some code here where I create my background and color scheme // Create the Begin Button which should place the other tiles. var beginButton = game.add.button( 20,50,"gadgets",this.placeTiles(),this); beginButton.frame = 10; // There's a bunch more code here I've removed for this forum post */ }, placeTiles: function(){ for(var i=0; i < numCols; i++){ var serialButton = game.add.button( 250 * (i+1) , game.height/5 + (i*tileSpacing) , "gadgets" , this.showTile , this); serialButton.frame = i+1; serialButton.value = this.theEmpire[i]; }//i++ }, showTile: function(target){ //More functions, etc... },}; game.state.add("PlayGame", playGame); game.state.start("PlayGame"); };Any explanation or guidance would be most appreciated. Thank you for your time!
-
Hello everyone, I will develop a new game with phaser, and I ask myself questions about how organize my code. I would like to use the ECS architecture but how implement it with Phaser? how you decouple the differents actors (player, enemies, objects,etc...) in your game? How you implement the differents interactions between the player and the environment (a door for instance)? Thanks!
-
Hi, good people! I encountered a new problem while coding my first game. First, let me explain what I have so far. It's a fighting game. I have my two characters on screen: player1 and player2. They move alright. They both have some movements in common (like moving around, jumping and ducking) and some movements of their own (a combination of keys will trigger a special move of some sort). Among other things, I have this in my code: var player; var player1; In function create() : player = game.add.sprite(18, 200, 'ciro'); player2 = game.add.sprite(618, 200, 'damian'); Finally, in function update() I have the movements of each of these characters. So what's the problem? I also have other characters in mind, with individual sprites, animations and moves (and they will share the basic moves, as well). My idea is to have a roster of fighters from where player1 and player2 will choose one each and then, in a stage randomly picked, fight each other. You know how it goes. How can player1 and player2 "choose" a character? Should I set the characters, with the sprites, animations and special moves in some sort of class or separate file and then, add the chosen one to either player1 or player2? I'm guessing I need some sort of variable there but I know almost nothing about javascript :s Help! I'm clueless!
-
I watched this talk Developing Games Using Data not Trees. It talks about a new paradigm of building programming, that is Entity - Component. He has a github repo with useful links for more information here: https://github.com/kirbysayshi/pocket-ces/blob/master/doc/jsconfeu-2014/bibliography.md. There I saw this new game engine using this paradigm Psykick2D. It also uses Pixi so competitive to Phaser, I will definitely check it out, what do you think?
-
So I am fairly new to OOP, especially with javascript. I have created some pretty basic classes and been able to successfully instantiate some objects from those classes by passing in strings, ints, and arrays as arguments, but I seem to be stumbling with how to pass another object into the class. I provided a simple example of what I am trying to do, the console does not display any errors, but it reads the object passed in as 'undefined'. If I access the object outside of the class I am passing it into, I get a full readout on the properties within the class. I have a gut feeling that I may have to use constructor .prototype method in the class, but I couldn't find any great examples targeting objects as the argument. function Hero(NAME, LVL, CLASS, STATS, WEAPON, ARMOUR, BOOTS) { this.name = NAME; //string this.level = LVL; //int this.class = CLASS; //object this.vitality = STATS[0]; //array this.strength = STATS[1]; //array this.dexterity = STATS[2]; //array this.speed = STATS[3]; //array this.intelligence = STATS[4]; //array this.mentality = STATS[5]; //array this.weapon = WEAPON; //object this.armour = ARMOUR; //object this.boots = BOOTS; //object } var player = new Hero ( 'King', 1, Berserker, [9,11,8,8,7,7], LargeAxe, LeatherChest, LeatherBoots );If anyone has an explanation, link, or example I would appreciate the help.
-
Hi! I'm following the Tutorial: How to organize your Javascript code into classes using Phaser HTML5 game framework - Toastedware but, the body class appears "undefined" in other classes files. Using the Firefox Javascript console, this message pop in the Level.js: 'ground.body is undefined'How fix this? Everything works fine, but this cracks the whole execution. P.S.: My Level.js file: Level = function(game){ this.game = game;}Level.prototype = { preload: function() { this.game.load.image('background', 'assets/game01/sky.png'); this.game.load.image('ground', 'assets/game01/platform.png'); }, create: function() { this.game.add.sprite(0, 0, 'background'); this.platforms = game.add.group(); var ground = this.platforms.create(0, game.world.height - 64, 'ground'); ground.scale.setTo(2, 2); ground.body.immovable = true; // The trouble line } }
-
Hi there little felas, I stumbled upon two ways to code with Phaser in OOP. Each one are diferent in how to code, and in how to structure your game. The first is the familiar http://codevinsky.ghost.io/phaser-2-0-tutorial-flappy-bird-part-1/ Let's call it "flappy tutorial". And the second is the http://createdineden.com/blog/2014/may/01/multi-platform-games-with-phaserjs/ And this we call it "not-flappy tutorial". Well, the flappy tutorial uses a simple and easy to understand way to structure the game. He uses the objects/classes ass a simple module of code to be added to the main code, without any complication and any work to think about. In the not-flappy tutorial, I took a few seconds to understand how it works. He makes the object a extention of the Phaser.Sprite to determinate that object ass a sprite, and to add to the game, you have to add ass a existing object through Phaser.Game.add.existing and add the object ass a Phaser object. Cool huh? So, witch one of these ways make our game run smoothly? Take less time to execute? May the force be with us, so we can live long and prosper...
-
Hi, I'm coming from flash/flixel perspective. When I'd need spawn enemies or track some objects and draw something on them repeatedly, I used to create a class instance which contains and watches objects, and mostly use it as kind-of factory pattern as well to generate objects too. I was doing this by extending groups in Flixel. I know groups are pretty similar in Phaser too. But possibly because of my lack of experience on OOP javascript, I haven't found a nice way to extend groups. Im extending groups this way; var ElementalSpawner = function(game,squad) { Phaser.Group.call(this,game);};ElementalSpawner.prototype = Object.create(Phaser.Group.prototype);ElementalSpawner.prototype.constructor = ElementalSpawner;Until this point everything is great but when I want to override Phaser.Group's update function, I had to do this; ElementalSpawner.prototype.update = function() { // Elemental Spawner update code here // super.update var i = this.children.length; while (i--) { this.children[i].update(); }};This works for sure, but I'm not comfortable with it. (So what if I was overriding a 200 line code function ) As you see I had to copy original group class's update functions contents into the overridden function. What I intended to do is similar to calling super.update() in AS3/Flash/Flixel. I'd like to ask for suggestions on how to extend and override functions of javascript/phaser classes? And more generally how would you design such structures like, spawners, healthbar renderers, GUI containers-updaters etc? I'm working on our "incomplete" LD48 game superdamage.com/LD29/dist Thanks.
-
Hi! I create some Class (for example GeomUtils) which contains static methods only. Can I define it as Object instead of function?
-
Hello everyone, Am not familiar with advanced JS programming, so this might be a super noob question for you in object oriented languages, most of the time when we want to create an enemy, we define a class that contain all the enemy parameters (speed,health,power,etc...) and then we control those values with gets and sets after creating an instance of that class in our main game class. Am asking for an alternative way to do the same thing with JavaScript (am using Phaser), my enemy must have Speed and Image variable that change depend on his state, and of course i have more than one enemy so.... Help please thank you
-
Hey everyone, I have been searching and searching and still can't find a good solution to this... The best answer I have come across is to just add to the prototype of an existing object the functionality I need. Then if I wanted to override something just wrap another function call around the function I want to override and just call the function then do what I need to do after it. Are there any cleaner ways to go about doing this sort without having to copy large chunks of code over and over again? Maybe perhaps Phaser already has something built in to make this easier? Another example of what I am trying or want to do would be like how in Flixel you'd have those certain functions you'd always override in a object after you'd extend it and add functionality to everything that could be re-used over and over again. If using the prototype is the only way that's cool... Just wondering.
