#Spriteilluminator create only shadow for free#
You can use an app like SpriteIlluminator to take your 2D images and convert them into normal maps for use within SpriteKit and this is exactly what I did before realising that you can already do this for free with SpriteKit. To do this, we use normal maps which are described as a “texture mapping technique used for faking the lighting of bumps and dents” 1. There is one more improvement that can be made and that’s to incorporate a certain amount of depth to the tiles. If you were to scroll to the sides you’d eventually see nothing which is exactly how I wanted it. Whilst we haven’t changed the revealed tiles at all, they now stand out even more thanks to the background tiles slowly fading into blackness. The end result looks pretty good:Īmbient light from the revealed tiles illuminates some of the surrounding forest. An SKLightNode is itself invisible it’s only purpose is to affect the light on other nodes. Then we choose a colour, set our Z position so we’re on top of our map, choose the rate of decay for our light (known as falloff), and add it to our scene. We create a light node and set its categoryBitMask to match the lightingBitMask of the nodes we want to illuminate (in this case the background tile map). To do that, we need to add an SKLightNode to each of our revealed tiles: let node = SKLightNode () node. Our map will now respect any light that is thrown at it. The first step is to set our tile map to use a lightingBitMask you can use different bits so that certain lights can affect different nodes but for now we’re just setting it to 1. However, we can go a step further by taking advantage of light nodes to provide dynamic lighting. This already looks much better and immediately focusses attention on the currently active tiles. This will ensure the background tiles are dark whilst the revealed tiles look almost backlit:ĭarkening the surrounding tree tiles using a colour blend. To begin with, I’m going to alter my tile map by fully blending it with the grey colour I use for the background upon which all the tiles sit using color and colorBlendFactor.
The second element and the focus of today’s article is to introduce lighting, or more specifically, lack of lighting.
The reason for this is that the camera will be locked to the main board so if you scroll to the edge you won’t see the edge of the tiles but rather a continuation making it seem larger than it really is. In the first instance, I’ve extended my hex grid tile map from last month by adding three additional tiles worth of depth around the main board. When you’re stood in a dense forest in the real world, it’s hard to tell if you’re miles or metres away from the exit and that’s what I want to get across here. Right now, this is how you use phaser-illuminated.One of my aims with The Forest is to make it feel like you are genuinely exploring a vast forest, the size and scale of which are unknowable to the player. The whole file is pretty small so it's not really necessary. Look in the build folder for a minified version, if you so desire. To solve this problem I've created a library to interface betwen illuminated.js and Phaser, allowing you to create illuminated lamp objects that are wrapped as Phaser sprites, allowing you to manage them as such.Ĭurrently the project has it's first release, so be aware there might be bugs and missing optimizations. Problem is, this is a low-level library that draws directly to the canvas, meaning the effects you create can't be managed with Phaser's sprite system. With some research I found illuminated.js, which has the capability for making pretty solid lighting effects using 2D canvas. I noticed Phaser doesn't really have lighting effects, making it difficult to add that extra layer of polish onto your game.
0 kommentar(er)
