[RGSS/RGSS2] Shader System (aplicação de efeitos pixel a pixel)

por João B Ter Jul 27, 2010 9:25 pm

RGSS Shaders Sytem (efeitos pixel a pixel)
Feito por:João B
Maker Utilizado: RMXP e RMVX
|Versão: 1.0|

Descrição:
"Um shader é uma classe em RGSS que será usada para analisar um bitmap pixel a pixel e aplicá-lo um efeito."
O sistema ainda não tem otimizações de velocidade e dá las com imagens muito grandes.

Funções:

Função Shader::apply(x, y) para aplicação do efeito (do Shader).
Permite definir tamanhos diferentes para o Bitmap com o efeito.
Permite o uso de dois Bitmaps para um efeito.
Permite o uso de parâmteros no Shader.

Instruções
Para utilizar o script, cole os dois scripts (Shader System e Custom Shader) acima do Main (XP e VX).
Para criar e aplicar os Shaders, instruções no script Custom Shader.

ScreenShots

Os efeitos visuais são diversos, dependendo do Shader. Você pode tornar o Bitmap totalmente branco, inverter as cores, e assim por diante.

Spoiler:

Script:
Os Shaders deverão ser criados dentro do script Custom Shader.

Shader System:

Código:: #=============================================================================== # RGSS Shaders System (script principal) #------------------------------------------------------------------------------- # Criador: João B #=============================================================================== #=============================================================================== # Classe Shader #=============================================================================== class Shader def self.apply(x, y) return @@bitmap.get_pixel(x, y) end def self.bitmap=(bitmap) @@bitmap = bitmap end def self.bitmap2=(bitmap2) @@bitmap2 = bitmap end def self.need_two_bitmaps return false end def self.size if need_two_bitmaps width = [@@bitmap.width, @@bitmap2.width].max height = [@@bitmap.height, @@bitmap2.height].max else width = @@bitmap.width height = @@bitmap.height end return [width, height] end def self.parameters=(params) @@parameters = params end end #=============================================================================== # Modificações em Bitmap #=============================================================================== class Bitmap def apply_shader(shader, other_bitmap = nil, parameters = {}) shader.parameters = parameters return if shader.need_two_bitmaps and not other_bitmap.is_a?(Bitmap) need_two_bitmaps = shader.need_two_bitmaps backup_bitmap = Bitmap.new(width, height) shader.bitmap = self shader.bitmap2 = other_bitmap if need_two_bitmaps width, height = shader.size y = 0 while y < height x = 0 while x < width pix = shader.apply(x, y) backup_bitmap.set_pixel(x, y, pix) x = 1 end y = 1 end return backup_bitmap end def apply_shader!(shader, other_bitmap = nil) self.clear self.blt( 0, 0, apply_shader(shader, other_bitmap), Rect.new(0, 0, self.width, self.height) ) end def copy copy_bitmap = Bitmap.new(self.width, self.height) copy_bitmap.blt(0, 0, self, Rect.new(0, 0, self.width, self.height)) return copy_bitmap end end #=============================================================================== # Fim do script #===============================================================================

Custom Shader:

Código:: #=============================================================================== # RGSS Shaders System (definições dos shaders) #------------------------------------------------------------------------------- # Criador: João B # ATENÇÃO: Insira este script DEPOIS do script principal # Aqui é onde serão feitas as definições dos Shaders #=============================================================================== =begin ╔═══════════════════════════════════════════════════════════════╗ ║ TUTORIAL DOS SHADERS ║ ╠═══════════════════════════════════════════════════════════════╣ ║ O QUE É UM SHADER? ║ ║ ║ ║ Um shader é uma classe em RGSS que será usada para analisar ║ ║ um bitmap pixel a pixel e aplicá-lo um efeito. ║ ║ Para entendermos os Shaders, vamos definir a classe Color. ║ ║ A classe Color representa uma cor. Sua inicialização é: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ color = Color.new([vermelho, [verde, [azul, [alpha]]]]) │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ Todos os parâmetros são opcionais. ║ ║ Para acessar os parâmetros depois, use: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ color.red # para vermelho │ ║ ║ │ color.green # para verde │ ║ ║ │ color.blue # para azul │ ║ ║ │ color.alpha # para alpha ou trânsparência │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ╠═══════════════════════════════════════════════════════════════╣ ║ OS MÉTODOS DO SHADER ║ ║ ║ ║ Os métodos do Shader são estáticos, porque são chamados pela ║ ║ própria classe, e não por uma instância. Portanto, todos os ║ ║ métodos adicionais a serem postos no seu Shader deverão ter ║ ║ o prefixo self.. Exemplo: self.new_color ║ ║ ║ ║ Os principais métodos são: ║ ║ - self.apply(x, y): O método mais importante, porque ele irá ║ ║ ser chamado pixel a pixel. Seus parâmetros são: ║ ║ - x e y: Coordenadas do pixel atual, ao qual será aplicada ║ ║ a nova cor. ║ ║ Este método deverá retornar uma cor, que será a aplicada ║ ║ ao pixel atual. ║ ║ - self.need_two_bitmaps: retornará um Booleano, que indicará ║ ║ a necessidade de outro Bitmap. Não precisa implementar se ║ ║ não for usar outro bitmap. ║ ║ - self.size: O tamanho do Bitmap que será originado. Não ║ ║ implemente e o Bitmap permanecerá em seu tamanho original. ║ ╠═══════════════════════════════════════════════════════════════╣ ║ COMO CRIAR UM SHADER ║ ║ ║ ║ Vá ao final desse mesmo script (antes do informativo "Fim do ║ ║ Script") e cole o código: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ class MyShader < Shader │ ║ ║ │ def self.apply(x, y) │ ║ ║ │ return @@bitmap.get_pixel(x, y) │ ║ ║ │ end │ ║ ║ │ end │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ A primeira linha define a classe MyShader, que é subclasse da ║ ║ classe Shader, base para fazer os Shaders. ║ ║ A segunda linha define o método self.apply, o principal ║ ║ método dos Shaders. ║ ║ A terceira linha pega o pixel (x, y) do bitmap (repare a ║ ║ variável estática @@bitmap) e a usa como retorno do método. ║ ║ A quarta e quinta linhas finalizam o método e a classe. ║ ║ ║ ║ Dentro do método, você pode fazer diferentes cálculos ║ ║ matemáticos, além de pegar pixels próximos ao (x, y). ║ ║ Exemplo: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ color = @@bitmap.get_pixel(x, y) │ ║ ║ │ bw = color.red*0.3 color.green*0.59 │ ║ ║ │ color.blue*0.11 │ ║ ║ │ col = Color.new(bw, bw, bw, color.alpha) │ ║ ║ │ return col │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ╠═══════════════════════════════════════════════════════════════╣ ║ APLICANDO UM SHADER A UM BITMAP ║ ║ ║ ║ Para aplicar um Shader a um Bitmap, você pode fazer de duas ║ ║ maneiras. ║ ║ 1. Usar o Bitmap::apply_shader(shader, [other_bitmap, ║ ║ [parameters]]): ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ shaded_bitmap = bitmap.apply_shader(MyShader) │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ O nome do Shader tem que ser o mesmo nome da classe, sem ║ ║ aspas e com maiúsculas nos lugares corretos. ║ ║ A variável bitmap representa o Bitmap original e a variável ║ ║ shaded_bitmap representa o Bitmap depois de aplicado o efeito.║ ║ Os parâmetros other_bitmap e parameters são opcionais e ║ ║ servem para funções explicadas a seguir. ║ ║ ║ ║ 2. Usar o Bitmap::apply_shader! ║ ║ A única diferença entre o apply_shader e o apply_shader! é que║ ║ o apply_shader retorna um Bitmap e o apply_shader! sobrescreve║ ║ o Bitmap original. ║ ║ Você pode usar o Bitmap::copy para copiar um Bitmap para outra║ ║ variável, porque, ao usar "other = bitmap", você estará ║ ║ criando uma referência em "other" e, ao usar ║ ║ "other = bitmap.copy", você estará duplicando o Bitmap, ║ ║ permitindo aplicar um Shader em other sem afetar bitmap. ║ ╠═══════════════════════════════════════════════════════════════╣ ║ SEGUNDO BITMAP ║ ║ ║ ║ Você pode usar um segundo Bitmap para a aplicação do efeito. ║ ║ Para isso, você deverá definir o método self.need_two_bitmaps ║ ║ fazendo-o retornar true: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ def self.need_twobitmaps │ ║ ║ │ return true │ ║ ║ │ end │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ ║ ║ Depois disso, você pode usar, dentro do método self.apply, a ║ ║ variável estática @@bitmap2, que representa o segundo Bitmap, ║ ║ e o método Bitmap::apply_shader receberá outro parâmetro, o ║ ║ other_bitmap: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ shaded = bitmap.apply_shader(MyShader, other_bitmap) │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ O parâmetro other_bitmap representa o segundo Bitmap que será ║ ║ usado. ║ ║ ║ ║ Note que, apesar de os dois Bitmaps serem passados, só o ║ ║ primeiro receberá o efeito. ║ ╠═══════════════════════════════════════════════════════════════╣ ║ TAMANHOS DIFERENTES ║ ║ ║ ║ Você pode definir um tamanho diferente para o bitmap depois do║ ║ efeito. Para isso, defina o método self.size. ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ def self.size │ ║ ║ │ return [@@bitmap.width, @@bitmap.height] │ ║ ║ │ end │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ self.size deverá retornar um array com dois elementos. O ║ ║ primeiro é a largura e o segundo é a altura do novo Bitmap. ║ ╠═══════════════════════════════════════════════════════════════╣ ║ PARÂMETROS ║ ║ ║ ║ Você pode definir parâmetros para um Shader. Para isso, ║ ║ você deverá usar o parâmetro parameters no apply_shader: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ Usando sem o segundo bitmap ║ ║ │ shaded = bitmap.apply_shader(MyShader, nil, parameters) │ ║ ║ Com o segundo bitmap ║ ║ │ shaded = bitmap.apply_shader(MyShader, other_bitmap, │ ║ ║ │ parameters) │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ║ O parâmetro parameters deve ser um Hash (array associativo) e ║ ║ pode ter qualquer tipo como chave. ║ ║ ║ ║ Então, para acessar os parâmetros do Shader, use a variável ║ ║ estática @@parameters. ║ ║ Exemplo: ║ ║ ┌───────────────────────────────────────────────────────────┐ ║ ║ │ color = @@parameters['my_param'] │ ║ ║ └───────────────────────────────────────────────────────────┘ ║ ╠═══════════════════════════════════════════════════════════════╣ ║ Por enquanto é só isso. Posso lançar mais versões futuramente.║ ║ Agora, aqui há dois exemplos de Shaders para você analisar. ║ ║ -- João B ║ ╚═══════════════════════════════════════════════════════════════╝ =end class RedChannelShader < Shader def self.apply(x, y) curr_color = @@bitmap.get_pixel(x, y) return Color.new(curr_color.red, 0, 0, curr_color.alpha) end end class BlackWhiteShader < Shader def self.apply(x, y) color = @@bitmap.get_pixel(x, y) bw = color.red*0.3 color.green*0.59 color.blue*0.11 return Color.new(bw, bw, bw, color.alpha) end end #=============================================================================== # Fim do Script #===============================================================================

Poste os scripts nesta ordem: Shader System, Custom Shader.

Créditos

Eu me baseei no Pixel Bender para fazer o script, mas todo o script dos Shaders foi feito por mim.

FAQ