jonteferm

Members
  • Content Count

    28
  • Joined

  • Last visited

Everything posted by jonteferm

  1. Hey! 👨‍🚀 I have been experimenting with Phaser for a while now and started a project like a year ago. It was a real time top-down rpg game where I ended up spending a lot of time trying to put together some fun combat mechanics. My visions for that project grew pretty big and I wanted to do something more short-term and I had been thinking much about creating some point and click adventure based on real photographs because I knew so many fine and inspiring places nearby that I could use as environment instead of having to bother spending a lot of time in creating graphics that I never get satisfied with anyway. So I started coming up with a story and went out some weekends this autumn with my Honor 8 mobile camera — yes, this is going to get real low budget 😏 — and collected some image material in locations that I found suitable. There is everything from dark pine forest to more open rocky areas, mountains and beech woods. There is even some material captured from the ruins of an old abbey! These images would then be sorted out to form the kind of game world I wanted. This is a process which I'm still engaging in, but I've started to make out how the first part of the game are going to be. Introduction The forest is spoken of as a place of magic and strange experiences. Still, there are no roads disturbing its ancient splendor. Although traces of some human inhabitants do exist, their wisdom and practices have since long been laid to rest by the passing of time and the power of nature. Some say their spirits still reside there and attempts have been made to unravel the mystic forces witnessed by people of recent times. After losing your friend during a camping adventure in the remote forest — you are contacted by the spirits of the land. You gain knowledge about a conflict between the supernatural powers that resides in the area. Dark forces have risen against the forces of light since a sorcerer came to dwell within the deep of the woodland. He has taken your friend as a human sacrifice. Will you find him before the night of ritual and restore peace to the forest? 💁‍♀️ Gameplay As can be read in the little introduction; the game is going to be about encountering dark powers. 🧛‍♂️ So there are areas in the game which you will have to clear of the darkness before working there or continuing to the next area — otherwise you'll go dead/mad/asleep-to-wake-up-later-having-wasted-a-lot-of-time or something. So in relation to this; an early idea for the game was to have some kind of mechanic where players have to draw magical incantations from a spell book. 🧙‍♂️ This is achieved by using a JS lib that makes it possible to draw vectors and compare vectors. The result is the matching percentage of the vectors — so in that way I can adjust difficulty and maybe also set different requirements for matching by shape. To make this drawing stuff more challenging; when the player are drawing in these dark areas — the canvas will shake and randomly erase lines you just drew and stuff like that. The first spell will be a lesser banishing spell to clear out the early dark areas. Then other spells will be added to solve greater problems in the game. Another mechanic that I'm developing is actually an idea I came up with for the previous Phaser project which I wrote about in the beginning. This mechanic is based on dowsing. So the player will have a crystal pendulum as a tool when finding clues and information. The pendulum can be dragged around the area and will move in different ways depending on what secrets can be revealed in that certain place. The key to interpret the pendulum will also be in the spell book I guess. 💁‍♀️ So these are two mechanics that is under development along with the first part of the game. Some video teasers of how this will look can be found here: Project Page with Demo Videos Another thing is that the gameplay will have a time aspect. So you will always have to return to the camp when it's getting dark because at night; all the areas in the game will be dangerous to be in, just like the areas affected by dark magic during the day. Below you will see some images of the stuff I just covered. And here is a link to my website and twitter where further updates about the game and the development process which probably will be pretty slow: http://www.heavyrealm.se/ https://twitter.com/jonteferm I imagine I will work more on the game if I also sometimes tell other human beings what I am doing.
  2. Aah thanks! Disabling the anti-aliasing definitely did the trick.
  3. 512 * 512 is the size of the game window and no I don't think I have that disabled because it isn't something I do in the code. Is it enabled by default? Yes that is true, but I thought maybe it is a more global issue.
  4. I have a graphics issue that I cannot pinpoint. My sprite appears more blurry at some positions of the map. Does anyone have an idea what this kind of problem can depend on? Both of these pictures shows the sprite when idle on different positions - so no animation is playing - and at the first picture the sprite looks more clear than it does on the second one. I don't know what more information I can give on this that is relevant.
  5. I think I solved it. The error is because I do redefine the prototypes instead of just adding the functions on to them
  6. Update: I do manage to solve this error by moving these to the Level.js Character.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype = Object.create(Character.prototype); But then I get an error later: this.player.countStats is not a function. This is a function inside Character.prototype.
  7. Hello! I'm trying to refactor my code making some inheritance. I'm using a Character prototype which is supposed to inherit from Phaser.Sprite and then there can be - for example - a Player prototype which inherits from the Character. The problem is that i get this error: this.onTextureUpdate is not a function inside phaser.js when trying to create the Player object inside the create-function of the level. I would be greatful if someone could take a look on this. Here is the code relevant to the issue (I think) (It's in separate files): Character = function(game, x, y, type){ Phaser.Sprite.call(this, game, x, y, type); this.id = 0; this.name = ""; this.health = 0; this.dexterity = 0; this.defense = 0; this.strength = 0; /*Räknas ut*/ this.primalDamage = 0; //TODO: Lägg till uträkning this.weaponDamage = 0; this.attackRate = 0; this.hit = 0; this.protection = 0; this.block = 0; this.reach = 0; /*---------*/ }; Character.prototype = Object.create(Phaser.Sprite.prototype); Character.prototype.constructor = Character; Character.prototype = { countStats: function(){ }, Etc. etc etc...... Then the player: Player = function(game, x, y){ Character.call(this, game, x, y, 'player'); this.equipped = { rightHand: { name: "broadsword", type: "weapon", damage: 4, protection: 0, attackRate: 1.6 , block: 0, }, }; this.health = 20; this.dexterity = 13; this.defense = 14; this.strength = 15; this.groupCombatEnabled = false; this.animations.add('idleRight', [0], 5, true); this.animations.add('right', [0, 1, 2], 5); this.animations.add('hitRight', [0, 3, 4], 5, true); this.animations.add('idleLeft', [5], 5, true); this.animations.add('left', [5, 6, 7], 5); this.animations.add('hitLeft', [5, 8, 9], 5, true); this.animations.add('idleUp', [10], 5, true); this.animations.add('up', [10, 11, 12], 5); this.animations.add('idleDown', [15], 5, true); this.animations.add('down', [15, 16, 17], 5); this.animations.add('hitDown', [15, 18, 19], 5, true); this.reachCircle = this.game.add.graphics(); this.reachCircle.beginFill(0x000000, 1); this.reachCircle.drawCircle(this.x+24, this.y+24, this.reach*48); this.reachCircle.alpha = 0.2; this.reachCircle.endFill(); this.events.onAnimationComplete.add(function(self, animation){ this.animations.stop(true, true); if(animation.name.includes("hit") && this.enemiesAttacked.length > 0){ this.enemiesAttacked.pop().takeDamage(this, "primary"); } }, this); this.wasd = { up: this.game.input.keyboard.addKey(Phaser.Keyboard.W), down: this.game.input.keyboard.addKey(Phaser.Keyboard.S), left: this.game.input.keyboard.addKey(Phaser.Keyboard.A), right: this.game.input.keyboard.addKey(Phaser.Keyboard.D) }; this.combatKeys = { switchCombatStyle: this.game.input.keyboard.addKey(Phaser.Keyboard.Q) }; this.dmgTextColour = "#ff0000"; }; Player.prototype = Object.create(Character.prototype); Player.prototype.constructor = Player; Player.prototype = { checkActions: function(levelObjects){ this.reachCircle.clear(); this.reachCircle.beginFill(0x000000, 1); this.reachCircle.drawCircle(this.x+24 Etc. etc. etc.. Then there is the level: /** * Level state. */ function Level() { Phaser.State.call(this); // TODO: generated method. } /** @type Phaser.State */ var proto = Object.create(Phaser.State.prototype); Level.prototype = proto; Level.prototype.constructor = Level; Level.prototype = { create: function(){ this.map = this.game.add.tilemap('oryxtiles'); this.map.addTilesetImage('tiles', 'tiles'); this.map.addTilesetImage('tree', 'tree'); this.backgroundLayer = this.map.createLayer('backgroundLayer', 768, 768); this.blockLayer = this.map.createLayer('blockLayer', 768, 768 ); this.map.setCollisionBetween(1, 3000, true, 'blockLayer'); this.backgroundLayer.resizeWorld(); this.createItems(); this.createDoors(); var playerStart = this.findObjectsByType('playerStart', this.map, 'objectLayer')[0]; this.player = new Player(this.game, playerStart.x, playerStart.y);
  8. I just use the phaser graphics to draw a rect somewhere on the screen: var graphics = this.game.add.graphics(); graphics.beginFill(0x000000, 1); this.gamePanel = graphics.drawRect(0, 768, 768, -352); graphics.endFill(); this.gamePanel.fixedToCamera = true; In my case it appears as a console at the bottom of the canvas. Then I have a gameLog-array to where I push new text lines that are supposed to show in the console. It also handles the flow of the console; pushing text up when it has filled the console. The function looks like this now. I know there are some numbers in it that appears to be taken from nowhere. For instance - I do not remember where the hell I got 93 from. But anyway. It's just in some kind of playground-state by now and It will be something to look over when I start lifting out code for an actual game: addText: function(text){ this.gameLog.push(this.game.add.bitmapText(10, 430, 'font',text, 16)); this.gameLog[this.gameLog.length-1].fixedToCamera = true; this.gameLogTextHeight += this.gameLog[this.gameLog.length-1].height; if(this.gameLogTextHeight >= 93){ var firstItem = this.gameLog.shift(); firstItem.visible = false; this.gameLogHistory.push(firstItem); this.gameLogTextHeight -= firstItem.height; } if(this.gameLog.length > 0){ for(var i = this.gameLog.length-1; i > 0; i--){ if(i > 0){ var prevText = ""; var height = 0; prevText = this.gameLog[i-1].text; height = this.gameLog[i].height; this.gameLog[i-1].destroy(); this.gameLog[i-1] = this.game.add.bitmapText(10, (this.gameLog[i].y + (16*(height/15.5))), 'font', prevText, 16); this.gameLog[i-1].fixedToCamera = true; } } } },
  9. Don't you have the counter as a variable global to the whole game? Where do you keep the counter? Post a code snippet
  10. Cool! I played the demo and I love the style and atmosphere. Looking forward to the full game!
  11. You can set the size of the sprite body - if that is what you are after. sprite.body.setSize(width, height, offsetX, offsetY) https://phaser.io/examples/v2/arcade-physics/offset-bounding-box
  12. Thanks! That works fine. Pretty obvious, but I did not think of it
  13. Hello, I have a problem with handling the collision between sprites. I have a group of enemies and a player sprite. I want none of the sprites to be able to move trough each others. At first I had the enemy body set to immovable and that disabled the player from pushing the enemy around upon collision. However, when I added more enemies to the group, I found that if the enemy bodies is set to immovable = true - they will be able to walk straight trough each others even if they have an internal collision detection (as that is the case between two immovable bodies). So if i set immovable to false - the enemies will appear solid when colliding with each other, but the player is able to push the enemy. What is it that I have not understood? I just want all the sprites solid.
  14. Hey! You can call this function on the tilemap: getTile(x, y, layer, nonNull). The X and Y should be given in tile units and not pixels, so for instance: if you have a 32x32 grid - tile unit 1 would be pixels 0-31 etc. You can see the full documentation here http://phaser.io/docs/2.4.4/Phaser.Tilemap.html#getTile.
  15. I don't know about the assets. I suppose it's free to use in your case but I let someone else answer that. But... Have you ever checked out this site? http://opengameart.org/ You might find some really cool stuff to use.
  16. Aah! Thank you Yes, that looks a bit weird in this context. It is a variable global to the game. I don't need to pass map to the function at this point - obviously as I do not even use it xD . But in the future - I thought maybe I will have more map objects representing levels and stuff which will load it's separate enemies. But now when I think of it: Why? I can't imagine I will ever have to view more than one map at once. Yes, you are right they should not be immovable. I guess I thought of "immovable" as "impassable". Also, when trying the line with the callback - I made the arcade.collide call in the wrong way. Thank you!
  17. Hey! I have a group of enemies created like this (called from create()): spawnEnemies: function(map){ this.enemies = this.game.add.group(); this.enemies.enableBody = true; this.game.physics.arcade.enable(this.enemies); var enemyStartPositions = this.findObjectsByType('enemyStart', this.map, 'objectLayer'); for(var i = 0; i < enemyStartPositions.length; i++){ var enemyStart = enemyStartPositions[i]; var enemy = new Enemy(this.game, enemyStart.x, enemyStart.y, 'cultist'); enemy.countStats(); this.enemies.add(enemy); } this.enemies.setAll("body.immovable", true); } In the update function - I try to detect the collision between the children in the group like in this example (using 2.4.7): http://examples.phaser.io/_site/view_full.html?d=arcade physics&f=group vs self.js&t=group vs self&phaser_version=v2.4.7& this.game.physics.arcade.collide(this.enemies); But they wont collide with - just passing trough - each other. Also tried with adding a callback as when I let the player sprite collide with the enemy group like this: this.game.physics.arcade.collide(this.player, this.enemies, this.collisionHandlerPlayerAndEnemy, null, this); this.game.physics.arcade.collide(this.enemies, null, this.collisionHandlerEnemyAndEnemy); And the callback-function will not be called (may it be that this does not even work at all when the case is group to group?). I need someone elses eyes on this. No properties for enemy body is set outside these code blocks.
  18. One suggestion would be to set up a web server and host it in a machine at home. Of course that may require you to buy something to host from if you don't want to keep your home computer running 24/7. I host from my Raspberry Pi 3 Of course that has some limitations depending on what will be on your website.
  19. Awsome! Yes, this works just as fine in this case. I use to create backgroundLayer and blockLayer in tiled and set collision on the whole block layer (because everything is just walls). Then I have an object layer for doors, items, npc starting positions and stuff that is going to be interacted with. Though, the tiles in the object layer are only placeholders to which I - in Tiled - assign properties with the name of the sprite/sprites that I should use in phaser as most of the stuff in my object layer use sprite-sheets for animation.
  20. If you want to get a specific tile out of a layer though. You can call this on the tilemap: getTile(x, y, layer, nonNull) . But that will be a tile object and not a sprite. Yes maybe the createFromObjects will work. Maybe iterating trough the tilemap and call that for every tile as it requires the layer array index.
  21. Ah, I see what you mean. If you should be able to call the sprite body in that way - the sprite must be it's own sprite object like the player Unit you got. So if I were you - I would create the towers in the object layer in tiled.
  22. About the collision: you can specify a custom bounding box by calling sprite.body.setSize(width, height, offsetX, offsetY).
  23. Looks like the walls is just a layer and not a group with enabled arcade physics. It will not work with the arcade.collide as it is just for stuff that have arcade physics. Have you tried to set collissionBetween to more than that? I have to set it to at least 3000 in my game for collision to take place.
  24. I'm using 4.7. Seems like it is the same params. But hey, I solved it. By just removing that damned else condition and adding this instead: this.events.onAnimationComplete.add(function(){ this.animations.stop(true, true); }, this); Thanks for looking into this!
  25. Okey, yes that is true. I thought of it in the wrong way. I guess my problem is that during the next frame, it enters the else - where the animation stops - as I am no longer holding down the button. So what i probably have to do; is to flag in some way that a animation is still in play and in that case prevent the animations.stop() even though it enters the else. However, I am under the impression that this is exactly what should be solved by the second parameter in my call to the animations.stop() function (dispatchComplete) which I set to true. Maybe I got that wrong.