pixijs / lights

Adds dynamic lighting via deferred shading to PixiJS
https://pixijs.io/lights/docs/index.html
MIT License
198 stars 28 forks source link

How to implement this in RPG Maker Mv? #36

Open PesadeloDoEspantalho opened 5 years ago

PesadeloDoEspantalho commented 5 years ago

Hello, I'm implemented projection spine in RPG Maker Mv, Now, I'm want to implement lights too, but these files.js, Isn't compatible...

There is this forum but it's not work : https://forums.rpgmakerweb.com/index.php?threads/lights-in-pixi-js.81370/

Some body to help me??

ivanpopelyshev commented 5 years ago

@djmisterjon knows how to do it.

Bear in mind that both projections and lights are experimental plugins and you have to be aware of how their work if you want to use them for something more than simple demos, especially if you want to use them together.

Both plugins were not even possible to make on vanilla pixijs before! First examples were 3 years ago but they worked only on heavily modified pixi.js , it took many nights to get the architecture right and not screw up the renderer API.

Maybe you wont be able to use them at the same time, maybe you have to wait when pixi-display supports multi-texture sprites, or something like that.

Are you sure you want normal maps in your game and not something simpler like here ?

Also user anisoft at pixijs slack knows how to use different types of lighting in RMMV. Do you want an invite there?

PesadeloDoEspantalho commented 5 years ago

Yes I'm interested. Thanks for the invitation.

ivanpopelyshev commented 5 years ago

give me your email here, or write me to XXX

PesadeloDoEspantalho commented 5 years ago

I'm send message in your mail. Thanks and sorry for my english.

@djmisterjon speak french, he can explain me no? How to contact him?

hjoseph96 commented 5 years ago

Also interested in this issue, let me know if anyone finds a solution...

ivanpopelyshev commented 5 years ago

The plugin is experimental, and people who are using it with RMMV.. not actually using it with vanilla RMMV, they already have very serious experience with plugins and their games are heavy-modded.

Plugin has several problems that weren't solved, like, for example, masking, or the fact that you have to use container with two sprites for every element, or the absence of integration with pixi-spine.

If you are sure, I can send you an invite to pixijs slack, but don't be surprised when you dont understand stuff from first try.

PesadeloDoEspantalho commented 5 years ago

I managed to make the sprite black but not enlightened, I'm not put normal, you think that's the problem ????

ivanpopelyshev commented 5 years ago

Sorry guys, I don't have time to explain everything, I'm working on v5 and moving plugins to it, including this one.

so far @djmisterjon is the only one who made it work.

PesadeloDoEspantalho commented 5 years ago

It's this without normal no light :D

ivanpopelyshev commented 5 years ago
  1. make sure updateStage() is called from your app, from somewhere. Otherwise layers wont work at all.
  2. make sure that lightLayer has _activeChildren with your lights inside. Its a calculated array with all stuff that has parentGroup=lightgroup
inc0der commented 5 years ago

I've never implemented pixi-lights into RPGMaker MV but I am using pixi-layers and the basic light example from pixi examples to create a lighting system of my own for RM game. My guess is pixi-lights will not be much different than doing things this way.

Take a look at examples below, I can't show you the exact way I'm doing it without confusing the crap out of you so I moved my code around to show you it a bit easier, I never tested the code, it's just an extraction of my code placed into one example to quickly show you. In my real code I use a class called LightManager to add the layers to Spriteset_Map and to add lights to the lighting layer.

The first thing you need to do is make sure Stage is using pixi-layers.

function Stage () {
  this.initialize.apply(this, arguments)
}

// Use PIXI Layers
Stage.prototype = Object.create(PIXI.display.Stage.prototype)
Stage.prototype.constructor = Stage

Stage.prototype.initialize = function () {
  PIXI.display.Stage.call(this)

  // The interactive flag causes a memory leak.
  this.interactive = false
}

Then add a lighting layer and a blend sprite to the map's spriteset

// Sorry about bad var names lol

  // Create lighting layer's that make the lights shine!
  const _lightingLayer = new PIXI.display.Layer()

  _lightingLayer.on('display', (element) => {
    element.blendMode = PIXI.BLEND_MODES.ADD
  })
  _lightingLayer.useRenderTexture = true
  _lightingLayer.clearColor = _ambience

  const _lightBlendLayer = new PIXI.Sprite(_lightingLayer.getRenderTexture())
  _lightBlendLayer.blendMode = PIXI.BLEND_MODES.MULTIPLY

// Alias createUpperLayer, create lights and add the layers and lights
const createUpperLayer = Spriteset_Map.prototype.createUpperLayer
Spriteset_Map.prototype.createUpperLayer = function () {
  createUpperLayer.call(this)
 this.addChild(_lightingLayer)
 this.addChild(_lightBlendLayer)

// Create two sprites, one is the light and another to hold the light, it's the only way this will work.
  const _lightContainer = new Sprite()
  const _lightSprite = new Sprite()

 /*
 Give lightSprite a light image for it's bitmap, Replace lightFilename with whatever file you use, or simply swap with  Bitmap.drawCircle(x, y, radius, color) or PIXI.Graphics, or whatever you want really.
 */

    _lightSprite.bitmap = ImageManager.loadBitmap('img/lights/', 'lightFilename', 0, true)
 _lightSprite.parentLayer = _lightingLayer

 // Add lightSprite to the container
 _lightContainer.addChild(lightSprite)

 // Add the lightContainer to the lightingLayer
 _lightingLayer.addChild(_lightContainer)
}
ivanpopelyshev commented 5 years ago

Yeah, i dont know why people go for lights with normals before they try simple solution. Of course its possible even without pixi-display, its just an efficient way to code multi-layered world.

The next step is to drawing a dark version of object and lighted one in different layers (day and night) and changing between gradually using light layer and a shader (simple tint or adjustment)