Search the Community

For years I imagined making a completely FMV interactive story/puzzle game (think Myst but made entirely with videos). Last year I finally got around to figuring out how to make the game mechanics work, and little by little put together Yeli Orog. The game was made with HTML5, CSS, and Javascript, and packaged with Electron. The game takes place in Asturias, Spain and was filmed in various locations there. If you are a fan of Myst-like games, interactive stories with puzzle elements, and FMV games, I think you will appreciate Yeli Orog. If you have any questions about the game let me know. Here is the steam page, the game will be released on July 13th: https://store.steampowered.com/app/886270/Yeli_Orog/ Here is the trailer: Some in-game screenshots:

I have a Phaser game created and I am able to create an updated visibility graphic object while my sprite moves. However, like in this example, and every other I have found online: http://www.emanueleferonato.com/2014/10/21/phaser-tutorial-how-to-create-an-html5-survival-horror-game-in-6-easy-steps/, they are using an image of the thing you want to see as the 'background', and simply .mask against the visibility graphic. In my case, I do not have an image of the map as it is created through a tilemap generator, so my current code basically shows the opposite of what I am looking for: For this example, I created a test box in the bottom right of the screen that has nothing to do with the real map (I'll add the correct walls later to the visibility algorithm). I want the part that is not white to be blacked out, and the whited part to be crystal clear. I have tried creating a sprite of just black, and a sprite of just transparent, and had them .mask = visibility graphic. But this just overwrites everything else. I have taken out the most important part of the code for reference: preload () { //load assets that are specific for this level this.game.load.image('blackness', '../../assets/images/blackness.jpg'); this.game.load.image('transparent', '../../assets/images/transparent.png'); //this.game.load.image('yellowish', '../../assets/images/yellowish.png') } create () { this.blackness = this.game.add.sprite(0,0,'blackness'); //this.blackness.alpha = 0.8; //this.transparent = this.game.add.sprite(0,0,'transparent'); this.lightCanvas = this.game.add.graphics(0,0); } update() { let visibility = this.createLightPolygon(this.currentPlayerSprite.x, this.currentPlayerSprite.y); this.lightCanvas.clear(); this.lightCanvas.beginFill(0xffffff,0.5); console.log('visibility',visibility) this.lightCanvas.moveTo(visibility[0][0],visibility[0][1]); for(let i=1;i<=visibility.length;i++){ this.lightCanvas.lineTo(visibility[i%visibility.length][0],visibility[i%visibility.length][1]); } //this.transparent.mask = this.lightCanvas; this.lightCanvas.endFill(); }

My graphics object becomes darker while moving. Has anyone dealt with this or know what settings might fix or other ideas? EDIT / MORE INFO: I tried antialias and native lines but they didn't help. If I slow the movement down enough the distortion doesn't happen anymore.. And when I take screenshots it looks fine too. So far I haven't seen this happen with curved shapes, only for straight lines and for the lines of rectangular shapes (not the filled inside part). When moving horizontally, only the vertical lines are distorted. When moving vertically, only the horizontal lines are distorted. When moving diagonally, all of the lines are distorted.

Hello everybody, I have a color rendering problem. When I add a texture to my box ( text ) , the color of the box turns dark . But when I remove the texture color is respected. I would just write a black text on my box and the texture around my box respects the original color With texture (text): http://www.babylonjs-playground.com/#INTPO Without texture: http://www.babylonjs-playground.com/#INTPO#1 Good day