PIXI.BLUR Pictures Layer ? (for space navigation)

[Jonforum]

Hello, I' would like embellished my navigation space map of my project.
I want. to know if exist any plugin or CallScript technique to put a blur in image layer?
In my example, when choosing a planet, I would put a gradual blurring of the background planet.


Ideally I'd like to have some control on the blur to give a beautiful rendering.


Ex: blur all image befor picture id:70


Something like this


Without blur ..





With a blur effect





Here The planet navigator i have build to understand the blur, i have need.


Tanks you guys if some can help me

 

[Bex]

The Blur looks awfull in my opinion.


It realy looks better without else my eyes hurt somehow when i see that blur.


Your Galaxy looks good, very interesting and nice fresh and inovative aproach for rpgmaker engine.

 

[Jonforum]

The Blur looks awfull in my opinion.


It realy looks better without else my eyes hurt somehow when i see that blur.


How did you got vector graphics with vector behavior zooming to work in MV ? Or is that pixel art like always in rpgmaker?

yes.. the blur of the image up, are ugly and i make it very fast.
It was only to show what I need.
The blur effect will be great once Dynamics with animations.


I'm not understand your 2nd issue ??
My game are not in pixel art, all are with Photoshop and AI. 


For zoom i use good picture based over my game resolution, and i use https://tinypng.com/ for optimal png compresion.
So 900 Ko picture passe to 200 Ko, this make me easy to use very higth resolution texture.


is that I have answered your issue ?

 

[Ossra]

Here is some code I whipped up really quick :

Spoiler

var EXA_Game_Picture_initialize = Game_Picture.prototype.initialize;

Game_Picture.prototype.initialize = function() {

  EXA_Game_Picture_initialize.call(this);

  this.initBlur();

};

Game_Picture.prototype.initBlur = function() {

  this._blur = null;

};

Game_Picture.prototype.showBlur = function(strength, quality, padding) {

  this._blur = new Object();

  this._blur.enabled  = true;
  this._blur.strength = strength; // CPU Friendly Value : 1.5
  this._blur.quality  = quality;  // CPU Friendly Value : 1.5
  this._blur.padding  = padding;

};

Game_Picture.prototype.eraseBlur = function() {

  this._blur = new Object();

  this._blur.enabled = false;

};

var EXA_Sprite_Picture_updateOther = Sprite_Picture.prototype.updateOther;

Sprite_Picture.prototype.updateOther = function() {

  EXA_Sprite_Picture_updateOther.call(this);

  var picture = this.picture();

  if (picture._blur) {
    if (picture._blur.enabled) {
      var tmpBlur     = new PIXI.filters.BlurFilter();
      tmpBlur.blur    = picture._blur.strength;
      tmpBlur.quality = picture._blur.quality;
      tmpBlur.padding = picture._blur.padding;
      this.filters    = [tmpBlur];
    } else {
      this.filters    = [];
    }

    picture._blur = null;
  }

};

// Show Blur
// * pictureId    - ID of the Picture
// * blurStrength - Strength of Picture Blur
// * blurQuality  - Quality of Picture Blur
// * blurPadding  - Padding around the Blurred Picture
// 
// [WARNING] Higher values may degrade overall performance!
// [WARNING] Multiple blurred, moving objects on screen may degrade overall performance!
$gameScreen.picture(pictureId).showBlur(blurStrength, blurQuality, blurPadding);

// Erase Blur
$gameScreen.picture(pictureId).eraseBlur();

// Multiple Pictures
var id  = 1;
var end = 70;

for (id = 0; id < end; id++) {
  var tPicture = $gameScreen.picture(id);
  if (tPicture) {
    tPicture.showBlur(1.5, 1.5, 0);
  }
}

 

[Jonforum]

Here is some code I whipped up in about ten minutes :

Spoiler

var EXA_Game_Picture_initialize = Game_Picture.prototype.initialize;

Game_Picture.prototype.initialize = function() {

EXA_Game_Picture_initialize.call(this);

this.initBlur();

};

Game_Picture.prototype.initBlur = function() {

this._blur = null;

};

Game_Picture.prototype.showBlur = function(strength, quality) {

this._blur = new Object();

this._blur.enabled = true;
this._blur.strength = strength; // CPU Friendly Value : 1.5
this._blur.quality = quality; // CPU Friendly Value : 1.5

};

Game_Picture.prototype.eraseBlur = function() {

this._blur = new Object();

this._blur.enabled = false;

};

var EXA_Sprite_Picture_updateOther = Sprite_Picture.prototype.updateOther;

Sprite_Picture.prototype.updateOther = function() {

EXA_Sprite_Picture_updateOther.call(this);

var picture = this.picture();

if (picture._blur) {
if (picture._blur.enabled) {
var tmpBlur = new PIXI.filters.BlurFilter();
tmpBlur.blur = picture._blur.strength;
tmpBlur.quality = picture._blur.quality;
tmpBlur.padding = (5 / picture._blur.quality) * 5;
this.filters = [tmpBlur];
} else {
this.filters = [];
}

picture._blur = null;
}

};

OMG is Work realy good, !!!


I'll try a few tests and I come see you

 

[Jonforum]

Here is some code I whipped up really quick :

Spoiler

var EXA_Game_Picture_initialize = Game_Picture.prototype.initialize;

Game_Picture.prototype.initialize = function() {

EXA_Game_Picture_initialize.call(this);

this.initBlur();

};

Game_Picture.prototype.initBlur = function() {

this._blur = null;

};

Game_Picture.prototype.showBlur = function(strength, quality) {

this._blur = new Object();

this._blur.enabled = true;
this._blur.strength = strength; // CPU Friendly Value : 1.5
this._blur.quality = quality; // CPU Friendly Value : 1.5

};

Game_Picture.prototype.eraseBlur = function() {

this._blur = new Object();

this._blur.enabled = false;

};

var EXA_Sprite_Picture_updateOther = Sprite_Picture.prototype.updateOther;

Sprite_Picture.prototype.updateOther = function() {

EXA_Sprite_Picture_updateOther.call(this);

var picture = this.picture();

if (picture._blur) {
if (picture._blur.enabled) {
var tmpBlur = new PIXI.filters.BlurFilter();
tmpBlur.blur = picture._blur.strength;
tmpBlur.quality = picture._blur.quality;
tmpBlur.padding = (5 / picture._blur.quality) * 5;
this.filters = [tmpBlur];
} else {
this.filters = [];
}

picture._blur = null;
}

};

Ok something wrong ??


i testing something, i try to remove the blur gradually for a nice effect


Ex: i declare my global var


BlurForce = 2;
BlurQual = 2;
BlurForce.toFixed(2);
BlurQual.toFixed(2);


After i blur what i need.


$gameScreen.picture(Planet5PID).showBlur(BlurForce, BlurQual);
$gameScreen.picture(Planet6PID).showBlur(BlurForce, BlurQual);
$gameScreen.picture(Planet7PID).showBlur(BlurForce, BlurQual);
$gameScreen.picture(Planet8PID).showBlur(BlurForce, BlurQual);




After i try in a other parallel process, i try remove the blur gradually to 0.0


BlurForce -= 0.1;
console.log('blur are at ' + BlurForce);
$gameScreen.picture(Planet5PID).showBlur(BlurForce, BlurQual);
$gameScreen.picture(Planet6PID).showBlur(BlurForce, BlurQual);
$gameScreen.picture(Planet7PID).showBlur(BlurForce, BlurQual);
$gameScreen.picture(Planet8PID).showBlur(BlurForce, BlurQual);


◆Wait：1 frame



But i have stange number or i do something wrong !


This give strange like thats ?


Console.LOG

blur are at 2.0
blur are at 1.9
undefined:2 blur are at 1.7999999999999998
undefined:2 blur are at 1.6999999999999997
undefined:2 blur are at 1.5999999999999996
undefined:2 blur are at 1.4999999999999996
undefined:2 blur are at 1.3999999999999995
undefined:2 blur are at 1.2999999999999994
undefined:2 blur are at 1.1999999999999993
undefined:2 blur are at 1.0999999999999992
undefined:2 blur are at 0.9999999999999992
undefined:2 blur are at 0.8999999999999992
undefined:2 blur are at 0.7999999999999993
undefined:2 blur are at 0.6999999999999993
undefined:2 blur are at 0.5999999999999993
undefined:2 blur are at 0.49999999999999933
undefined:2 blur are at 0.39999999999999936
undefined:2 blur are at 0.2999999999999994
undefined:2 blur are at 0.19999999999999937
undefined:2 blur are at 0.09999999999999937
undefined:2 blur are at -6.38378239159465e-16
undefined:2 blur are at -0.10000000000000064
undefined:2 blur are at -0.20000000000000065
undefined:2 blur are at -0.30000000000000066
undefined:2 blur are at -0.4000000000000007
undefined:2 blur are at -0.5000000000000007

 

[Jonforum]

Here is some code I whipped up really quick :

Spoiler

var EXA_Game_Picture_initialize = Game_Picture.prototype.initialize;

Game_Picture.prototype.initialize = function() {

EXA_Game_Picture_initialize.call(this);

this.initBlur();

};

Game_Picture.prototype.initBlur = function() {

this._blur = null;

};

Game_Picture.prototype.showBlur = function(strength, quality, padding) {

this._blur = new Object();

this._blur.enabled = true;
this._blur.strength = strength; // CPU Friendly Value : 1.5
this._blur.quality = quality; // CPU Friendly Value : 1.5
this._blur.padding = padding;

};

Game_Picture.prototype.eraseBlur = function() {

this._blur = new Object();

this._blur.enabled = false;

};

var EXA_Sprite_Picture_updateOther = Sprite_Picture.prototype.updateOther;

Sprite_Picture.prototype.updateOther = function() {

EXA_Sprite_Picture_updateOther.call(this);

var picture = this.picture();

if (picture._blur) {
if (picture._blur.enabled) {
var tmpBlur = new PIXI.filters.BlurFilter();
tmpBlur.blur = picture._blur.strength;
tmpBlur.quality = picture._blur.quality;
tmpBlur.padding = picture._blur.padding;
this.filters = [tmpBlur];
} else {
this.filters = [];
}

picture._blur = null;
}

};

anyway, I'll let the gradual effect, I am rather very satisfied with the results.
A very big thank you to you. @Exhydra you are awesome guys. !
I noticed some strange little lines, if you know which they arise.
Here the final result, for i very big map, not very laggy, but i need to optimise this soon. but when all picture are in cache, all run fine.


Space navigation with EXA motion blur plugin

 

[Bex]

Yes you answered it, thanks.

 

[Jonforum]

Yes you answered it, thanks.

To do similar, you need huge picture ex:


Your game are 1280x720p.


Planet are  = 700px700p


And they are show at 2% size.
And when focus om, they are at 100%.

 

[mlogan]

@Jonforum, please avoid double posting, as it is against the forum rules. You can review our forum rules here. Thank you.


If you need to add something to your last post, just hit edit.


Has this request been solved then?

 

[Jonforum]

@Jonforum, please avoid double posting, as it is against the forum rules. You can review our forum rules here. Thank you.


If you need to add something to your last post, just hit edit.


Has this request been solved then?

Yes i mark [solved] sorry, but don't lock tanks you

 

[Ossra]

Waaaait ... working on a proper solution.


EDIT: Here is a proper-ish plugin for blurring pictures.


Exhydra Picture Control - Blur Filter

// Add Blur
// * pictureId      - ID of the Picture
// * blurStrength   - Initial Strength of Picture Blur
// * blurQuality    - Quality of Picture Blur
// * blurPadding    - Padding around the Blurred Picture
// 
// [WARNING] Higher values may degrade overall performance!
// [WARNING] Multiple blurred, moving objects on screen may degrade overall performance!
$gameScreen.picture(pictureId).addBlur(blurStrength, blurQuality, blurPadding);

// To Blur Strength
// * pictureId      - ID of the Picture
// * blurStrength   - Target Strength of Picture Blur
// * durationFrames - Duration of the Effect in Frames
$gameScreen.picture(pictureId).toBlur(blurStrength, durationFrames);

// Erase Blur
// * pictureId      - ID of the Picture
$gameScreen.picture(pictureId).eraseBlur();


// Add and Gradually Blur Picture
$gameScreen.picture(1).addBlur(0, 1.5, 0);
$gameScreen.picture(1).toBlur(10, 120);

 

[Jonforum]

Waaaait ... working on a proper solution.


EDIT: Here is a proper-ish plugin for blurring pictures.


Exhydra Picture Control - Blur Filter



// Add Blur
// * pictureId - ID of the Picture
// * blurStrength - Initial Strength of Picture Blur
// * blurQuality - Quality of Picture Blur
// * blurPadding - Padding around the Blurred Picture
//
// [WARNING] Higher values may degrade overall performance!
// [WARNING] Multiple blurred, moving objects on screen may degrade overall performance!
$gameScreen.picture(pictureId).addBlur(blurStrength, blurQuality, blurPadding);

// To Blur Strength
// * blurStrength - Target Strength of Picture Blur
// * durationFrames - Duration of the Effect in Frames
$gameScreen.picture(pictureId).toBlur(blurStrength, durationFrames);

// Erase Blur
// * pictureId - ID of the Picture
$gameScreen.picture(pictureId).eraseBlur();


// Add and Gradually Blur Picture
$gameScreen.picture(1).addBlur(0, 1.5, 0);
$gameScreen.picture(1).toBlur(10, 120);

You are a gods. @Exhydra
It is even better,!!! and works very great.



A small correction if other people need use.
You say


$gameScreen.picture(1).toBlur(10, 120);


But Not work, it return error, need 3 para
 


$gameScreen.picture(1).toBlur(10, 120, 0); // Streng, Time, ..padding




Thank you very much for your ingenuity


@+

 

[Ossra]

@Jonforum I have updated the plugin with minor changes since the last post. You may want to re-download and re-add the plugin to your project. 'toBlur' should only have two arguments (strength, duration).

 

[Jonforum]

@Jonforum I have updated the plugin with minor changes since the last post. You may want to re-download and re-add the plugin to your project. 'toBlur' should only have two arguments (strength, duration).

Ok true,


Thank you very much, the plugin is 100% operational now.
I have some suggestion, but for me all is ok.


I like to know if the plugin could and can blur a paralax? (background)
Or on the characters heroes or event sprites ?

 

[Ossra]

@Jonforum I'll work on adding a blur option for characters and parallax sometime here soon.

 

[Jonforum]

@Jonforum I'll work on adding a blur option for.....

Hi @Exhydra


I have noted a small crash.


If you show picture like this (No file)





And after you transfer player to another map.


I have this message

TypeError: Cannot read property 'added' of undefined

a your line 


221:


if (this._blurFilter.added) {
this._blurFilter.added = false;

this.filters = null;
}




If you have an idea to prevent this problem?


I use blank file for the DTextPicture plugin from Triacontane.


Tanks you

 

[Ossra]

@Jonforum Are you using version 1.05 (current version)? That may correct the error.

 

[Jonforum]

@Jonforum Are you using version 1.05 (current version)? That may correct the error.

I confirm, not more error thank you.
I observed the changes.


It not is more useful to use


$gameScreen.picture(id).addBlur();
//and
$gameScreen.picture(id).toBlur();


but just


$gameScreen.blurPicture(id, strength, duration, quality, padding);




The plugin create and add alway the blur function on a new picture when picture are create ?


If i understand

 

[Ossra]

@Jonforum You can use the following, if you want.

$gameScreen.picture(id).setBlur(strength, quality, padding);