Persona 5-esque Message Option (Temporary Screenshot)

[Rink27]

I'm trying to think of a way to mimic the Persona 5 message options:

(Or: https://s3.amazonaws.com/zam-www/assets/editorial/2017/03/persona5_sojiro.jpg)

The way MV is designed, any code executed after a text message box would remove the message box unless it's related, to my understanding.

Is it possible to have the game take a (temporary) screenshot (via a command) and display it on screen until another command removes it and deletes the image from memory?

That way I think I can run a message box, along with the options and relevant face/images, over the screenshotted image. I can also dim the image similar to how the background becomes dimmed in Persona 5 (can be observed in the picture).

I assume the alternative of enabling double message boxes is hard since such a plugin isn't out as yet.

 

[ashikai]

I don't think this is something you need a script for, TBH. You can already see choice options (which is what's on the right there) and the message window at the same time. I think you could get away with just changing out your message styles. I don't think you need to get so complicated as to take screenshots and overlay them, the way I understand it.

 

[mogwai]

This little plugin me and @shinichi999 came up with will save the screen to your pictures folder using Node Fs.

var screenShotSaveByNodeFs = function(filename){
   var fs = require('fs');
   var path = require('path');
   var lp = document.location.pathname;
   var pathName = lp.match(/^\/?\w:\//)!==null? // windows path
       decodeURIComponent(lp.replace(/^\/|index\.html$/g, ''))
   :
       decodeURIComponent(lp.replace(/index\.html$/, '')); // mac path
   fs.writeFile(path.join(path.normalize(pathName + "img/pictures/"), path.normalize(filename)),
       SceneManager.snap()._canvas.toDataURL("image/png").split(",")[1], 'base64',
       function(er) {
           if (er) alert(er);
       }
   );
};

Use it via event script call like so...

screenShotSaveByNodeFs("anyRandomPictureName.png");

Then it goes in your pictures folder so you can use it like a picture via eventing.

I also have a plugin that turns the current message box into a picture, if you don't want the whole screen, and @shinichi999 is helping me buffer out the kinks in that one as well. https://forums.rpgmakerweb.com/index.php?threads/two-dialogues-at-the-same-time.77045

 

[Rink27]

I don't think this is something you need a script for, TBH. You can already see choice options (which is what's on the right there) and the message window at the same time. I think you could get away with just changing out your message styles. I don't think you need to get so complicated as to take screenshots and overlay them, the way I understand it.

It's difficult to maintain the message and choice options to appear together when you want to do other effects such as show a picture, tint the screen, etc.

@mogwai thank you very much. The screen saving would be nice if there was a way to delete the pictures (so that it doesn't take up space in the long run). However, the plugin about converting the message box into a picture seems more efficient for what I would want. I'd check into it.

 

[mogwai]

I could rig the show picture thing to use temporary images. There is no need to save pictures if you don't need to. BRB.

EDIT: Here is a new function that will take a screenshot and show it as a picture. It will only be part of the game as long as the game is open, and only as long as the picture of the ID is not erased.

(function(alias){
   ImageManager.loadPicture = function(filename, hue) {
       if(filename.match(/^data:image\/png;base64,/) !== null){
           return this.loadNormalBitmap(filename, hue);
       }
       return alias.apply(this, arguments);
   };
})(ImageManager.loadPicture);
var freezeGameScreenToPicture = function(parameters){
   var p = parameters || {};
   var GC = SceneManager.snap()._canvas;       // gameCanvas
   var screenShot = GC.toDataURL("image/png");// base64 data image
   $gameScreen.showPicture(                  // show Picture (
       p.id       || 1,                     // picture ID and...
       screenShot,                         // name (saved ScreenShot)
       p.origin   || 0,                   // origin
       p.x        || 0,                  // x
       p.y        || 0,                 // y
       p.scaleX   || 100,              // scaleX
       p.scaleY   || 100,             // scaleY
       p.opacity  || 255,            // opacity
       p.blendMode|| 0              // blendMode
   );                              // );
};

Call it like...

freezeGameScreenToPicture({id:NUMBER});

Any of these other parameters are optional. It should be all the same options in the show Picture dialogue. 0-1, 0-255, 0-100+, etc.

freezeGameScreenToPicture({id:1, origin:0, x:0, y: 0, scaleX:100, scaleY:100, opacity:255, blendMode:0});

This ^ shows a picture with the picture ID #1, so I can do event picture stuff to it by ID #1.

This way is probably better than the first plugin I posted, because that first plugin will muddy up the pictures folder and it won't run in browsers because Node Fs.

 

[Rink27]

Thank you very much for your time and consideration @mogwai
Though, the pinned picture messages is a lot more exciting to me at the moment, lol.
I'd see to finding a way to incorporating your temporary screenshotting as well in my game.