• Content Count

  • Joined

  • Last visited

About jonteferm

  • Rank

Profile Information

  • Gender
  • Location

Recent Profile Visitors

1351 profile views
  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: 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){, game, x, y, type); = 0; = ""; = 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; = 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){, game, x, y, 'player'); this.equipped = { rightHand: { name: "broadsword", type: "weapon", damage: 4, protection: 0, attackRate: 1.6 , block: 0, }, }; = 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.reachCircle.beginFill(0x000000, 1); this.reachCircle.drawCircle(this.x+24, this.y+24, this.reach*48); this.reachCircle.alpha = 0.2; this.reachCircle.endFill();, animation){ this.animations.stop(true, true); if("hit") && this.enemiesAttacked.length > 0){ this.enemiesAttacked.pop().takeDamage(this, "primary"); } }, this); this.wasd = { up:, down:, left:, right: }; this.combatKeys = { switchCombatStyle: }; 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() {; // TODO: generated method. } /** @type Phaser.State */ var proto = Object.create(Phaser.State.prototype); Level.prototype = proto; Level.prototype.constructor = Level; Level.prototype = { create: function(){ ='oryxtiles');'tiles', 'tiles');'tree', 'tree'); this.backgroundLayer ='backgroundLayer', 768, 768); this.blockLayer ='blockLayer', 768, 768 );, 3000, true, 'blockLayer'); this.backgroundLayer.resizeWorld(); this.createItems(); this.createDoors(); var playerStart = this.findObjectsByType('playerStart',, 'objectLayer')[0]; this.player = new Player(, playerStart.x, playerStart.y);
  8. I just use the phaser graphics to draw a rect somewhere on the screen: var 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(, 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.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)
  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
  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? You might find some really cool stuff to use.