PH - Video Title

[PrimeHover]

PH - Video Title
​

 
​

Introduction

• This plugin allows you to put a video at the background of the Title Screen instead of a static image.
  

Configuration

• Download the JS file and include it into the /plugins folder of your project.
  
• Open the Plugin Manager, select the file PH_VideoTitle.js, and turn it on.
  
• Use the Video Name parameter to define the name of the video you want to exhibit in the background. This video must be inside the /movies folder of your project (Only webm extension is allowed).
  
• You may want to define an optional poster image in the variable Video Poster Name. The image should be located into the /img/pictures folder of your project.
  

Full Documentation (Example, ChangeLog...)

• Official Blog Post
  

Script

• GitHub: https://github.com/PrimeHover/VideoTitle
  

Credits

• PrimeHover
  

 

[Halcy0n]

This is phenomenally easy to use and works fantastic. Thanks for this!

 

[jackseg]

Very good. Big thanks !

It's possible to use in game ? The problem from integrate movie player is not possible to skip.

If I have a long movie (intro), the user must skip the video.

Thanks.

 

[PrimeHover]

Very good. Big thanks !

It's possible to use in game ? The problem from integrate movie player is not possible to skip.

If I have a long movie (intro), the user must skip the video.

Thanks.

Hi!So, you cannot use this plugin for calling videos anywhere in the game. Just in the title screen.

Also, when you select an option in the Title (like New Game or Continue), you are kind of "skipping the video" to go into the game.

If you want to play a video in-game, there is an option in the events to call a video!

Thanks!

 

[alberthk]

. . .now I can make title less boring. . .

 

[jackseg]

If you want to play a video in-game, there is an option in the events to call a video!

Yes but with this event, we have no options.

If I want skip the movie it's not possible 

 

[PrimeHover]

Yes but with this event, we have no options.

If I want skip the movie it's not possible 

Oh! Ok, I see..Well, this is just for the Title.. perhaps I can do one for the game though!

 

[jackseg]

It was perfect and you become my god

 

[RastaMan]

I did all steps from instructions, but there is no video in main menu, only black screen.

What i did wrong?

 

[PrimeHover]

I did all steps from instructions, but there is no video in main menu, only black screen.

What i did wrong?

That's strange. If you follow the example that I gave, it should be fine.Can you take a print screen of the configuration of the plugin?

 

[ArkDG]

Prime, I don't know if it is just with me, but when I enter the Load Scene, que video pauses. I noticed how you do it happens (at least on my game)
To be true with you, I made my own version of your script fusioning it with Soul777 Title with pictures. I'm not having sucess in making the video stil palys on the background without it never stopping even before I load the game file ><

This is what I did with you script:

Spoiler

//----------------------------------------------------------// Animated Title Cirno.js//----------------------------------------------------------// FUSAO ENTRE ANIMATED TITLE REIMU + PH_Video_Title/*: * @plugindesc Makes your boring title screen to an animated one! * @author Soulpour777 and PrimeHover * * @help//----------------------------------------------------------// Animated Title Cirno.js// Author: Soulpour777//---------------------------------------------------------- * Plugin Help: * Mouse and Touch Pad Settings: * Take note that when you change the locations of your command picture's x and y, * you might want to consider changing some of the variables that can be found * in your plugin manager, because most of them are at default location where * your commands are. That means if you changed the position of your commands, * change the touchpad settings as well. * Change the following variables if command position is changed: * TouchPadXMin, TouchPadXMax, TouchPadYMin01, TouchPadXMax01, * TouchPadYMin02, TouchPadXMax02, TouchPadYMin03, TouchPadXMax03. * Each TouchPadYMin and Max values are determined which command * is used. If you are using separate images, bulk them into one just like * how the default example was made. * Place your images under the img/titles1 folder. * @param TitleCommandImagesReimu * @desc The list contains the names of the images of your title command. * @default Menu01, Menu02, Menu03 * * @param TitleCommandsX * @desc The x position of your title command images. * @default 313 * * @param TitleCommandsY * @desc The x position of your title command images. * @default 380 * * @param PortraitTitle * @desc The portrait image you use floating on the screen. (without "" marks) * @default Reimu * * @param PortraitImageX * @desc The x position of the portrait image you use floating on the screen. * @default 400 * * @param PortraitImageY * @desc The y position of the portrait image you use floating on the screen. * @default 200 * * @param PortraitsOpacity * @desc Opacity of the Portraits you are using. * @default 255 * * @param PortraitMovementDivider * @desc How many milliseconds do you want to cut off animating the portrait everytime? * @default 1000 * * @param TitleBackSprite * @desc Opacity of the Portraits you are using. * @default TitleBack * * @param CircleObj * @desc The Circle Symbol you are using (without "" marks). * @default CircleSymbol * * @param CircleX * @desc The x position of the circle rotating on your title screen. * @default 620 * * @param CircleY * @desc The y position of the circle rotating on your title screen. * @default 312 * * @param CircleAnchorX * @desc The origin point of the sprite in x. (ex: (0,0) to (1,1).) * @default 0.5 * * @param CircleAnchorY * @desc The origin point of the sprite in y. (ex: (0,0) to (1,1).) * @default 0.5 * * @param CircleOpacity * @desc The opacity of your circle symbol rotating on your title screen. * @default 255 * * @param CircleRotation * @desc The rotation speed of the circle object rotating on your title screen. * @default 0.005 * * @param ContinueDisabled * @desc The image displayed if there's no save data and its under continue mark. * @default Menu02_B * * @param CursorDivider * @desc How many milliseconds do you want to cut off animating the cursor everytime? * @default 200 * * @param TouchPadXMin * @desc The touchpad default x position minimum value range. * @default 20 * * @param TouchPadXMax * @desc The touchpad default y position maximum value range. * @default 180 * * @param TouchPadYMin01 * @desc The touchpad default y position minimum value range (First Option). * @default 400 * * @param TouchPadYMax01 * @desc The touchpad default y position maximum value range (First Option). * @default 420 * * @param TouchPadYMin02 * @desc The touchpad default y position minimum value range (Second Option). * @default 440 * * @param TouchPadYMax02 * @desc The touchpad default y position maximum value range (Second Option). * @default 480 * * @param TouchPadYMin03 * @desc The touchpad default y position minimum value range (Third Option). * @default 470 * * @param TouchPadYMax03 * @desc The touchpad default y position maximum value range (Third Option). * @default 520 * */var Imported = Imported || {};Imported.AnimatedTitleReimu = true;var Soulpour777 = Soulpour777 || {};Soulpour777.AnimatedTitleReimu = {};Soulpour777.AnimatedTitleReimu.params = PluginManager.parameters('TittlePicVideoSPHaRK'); // Touchpad Settingsvar touchpad_xmin = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadXMin'] || 298); var touchpad_xmax = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadXMax'] || 511); var touchpad_ymin_a = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadYMin01'] || 375); var touchpad_ymax_a = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadYMax01'] || 412); var touchpad_ymin_b = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadYMin02'] || 413); var touchpad_ymax_b = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadYMax02'] || 450); var touchpad_ymin_c = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadYMin03'] || 451); var touchpad_ymax_c = Number(Soulpour777.AnimatedTitleReimu.params['TouchPadYMax03'] || 478); //Video Variables Settings var videoMuted = 0 var videoLoop = 0 var videoWidth = 1040 //830 var videoHeight = 640 //470 var videoX = -15 var videoY = 0// Portrait Variablesvar portraits_opacity = Number(Soulpour777.AnimatedTitleReimu.params['PortraitsOpacity'] || 255);var portrait_images_list = String(Soulpour777.AnimatedTitleReimu.params['PortraitTitle']|| "Reimu");var portrait_image_x = Number(Soulpour777.AnimatedTitleReimu.params['PortraitImageX'] || 400);var portrait_image_y = Number(Soulpour777.AnimatedTitleReimu.params['PortraitImageY'] || 200);var portrait_image_mov = Number(Soulpour777.AnimatedTitleReimu.params['PortraitMovementDivider'] || 1000);//Circle Variablesvar circle_sym = String(Soulpour777.AnimatedTitleReimu.params['CircleObj']|| "CircleSymbol");var circle_sym_x = Number(Soulpour777.AnimatedTitleReimu.params['CircleX'] || 620);var circle_sym_y = Number(Soulpour777.AnimatedTitleReimu.params['CircleY'] || 312);var circle_sym_anchor_x = Number(Soulpour777.AnimatedTitleReimu.params['CircleAnchorX'] || 0.5);var circle_sym_anchor_y = Number(Soulpour777.AnimatedTitleReimu.params['CircleAnchorY'] || 0.5);var circle_sym_opacity = Number(Soulpour777.AnimatedTitleReimu.params['CircleOpacity'] || 255);var circle_sym_rotation = Number(Soulpour777.AnimatedTitleReimu.params['CircleRotation'] || 0.005);// Title Variablesvar title_back_sprite = String(Soulpour777.AnimatedTitleReimu.params['TitleBackSprite']|| "titleBack");var title_commands_x = Number(Soulpour777.AnimatedTitleReimu.params['TitleCommandsX'] || 313);var title_commands_y = Number(Soulpour777.AnimatedTitleReimu.params['TitleCommandsY'] || 380);var continue_is_disabled = String(Soulpour777.AnimatedTitleReimu.params['Menu02_B'] || "Menu02_B");var cursor = String(Soulpour777.AnimatedTitleReimu.params['IndicatorCursor'] || "Indicator_Cursor");var cursor_divider = Number(Soulpour777.AnimatedTitleReimu.params['CursorDivider'] || 200);// Alias Methodsvar alias_scene_title_prototype_create = Scene_Title.prototype.create;var alias_scene_title_prototype_update = Scene_Title.prototype.update;// Command Image Variablesvar reimu_command_images = Soulpour777.AnimatedTitleReimu.params['TitleCommandImagesReimu'].split(/\s*,\s*/).filter(function(value) { return !!value; });var titleImage = String(Soulpour777.AnimatedTitleReimu.params['TitleLogo'] || "Title_Logo");// Instance VariablesScene_Title.prototype.circle_object;Scene_Title.prototype.titleScreenCommandReimu;Scene_Title.prototype.command_option_sprite;Scene_Title.prototype.command_continue_sprite;Scene_Title.prototype.cursor_image;Scene_Title.prototype._gameTitleImage;Scene_Title.prototype.particle_object;// Disable Drawing of Title Parametervar disableDrawingTitle = String(Soulpour777.AnimatedTitleReimu.params['DisableDrawingOfTitle'] || "true"); /* Video Title Class */ var PH_VideoTitle = null; function VideoTitle() { this.name = 'EdGdS.webm'; /* Creating video tag */ this._video = document.createElement('video'); this._video.id = 'VideoTitle_' + this.name.replace(/[^A-Z0-9]+/ig, "_"); this._video.src = 'movies/' + this.name; this._video.style.width = 0; this._video.style.height = 0; this._video.autoPlay = false; /* Control Options */ this.setControlOptions(); /* Appending the video at the body tag */ document.body.appendChild(this._video); /* Starts video and creates the texture */ this.setVideoTexture(); } VideoTitle.prototype.constructor = VideoTitle; VideoTitle.prototype.setControlOptions = function() { if (videoLoop == 1) { this._video.loop = true; } else { this._video.loop = false; } if (videoMuted == 1) { this._video.muted = true; } else { this._video.muted = false; } }; VideoTitle.prototype.setVideoTexture = function() { this._texture = PIXI.VideoTexture.textureFromVideo(this._video); this._spriteVideo = new PIXI.Sprite(this._texture); this._spriteVideo.width = videoWidth; this._spriteVideo.height = videoHeight; this._spriteVideo.x = videoX; this._spriteVideo.y = videoY; }; VideoTitle.prototype.pauseVideo = function() { this._video.pause(); }; VideoTitle.prototype.playVideo = function() { this._video.play(); };Scene_Title.prototype.create = function() { /* Prevent the video to be duplicated */ if (PH_VideoTitle === null) { PH_VideoTitle = new VideoTitle(); } this.videoTitle = PH_VideoTitle; this.videoTitle.playVideo(); this.addChild(this.videoTitle._spriteVideo); //call original method alias_scene_title_prototype_create.call(this); this.portrait_images = null; this.create_portrait(); this.create_titleDrawing(); this.create_circle_object(); this.createCommandImages(); this.create_indicator();};Scene_Title.prototype.start = function() { Scene_Base.prototype.start.call(this); SceneManager.clearStack(); if (videoMuted == 1) { this.playTitleMusic(); } this.startFadeIn(this.fadeSpeed(), false); }; Scene_Title.prototype.terminate = function() { Scene_Base.prototype.terminate.call(this); this.videoTitle.pauseVideo(); SceneManager.snapForBackground(); };Scene_Title.prototype.create_portrait = function() { this.portrait_images = new Sprite(); this.portrait_images.bitmap = ImageManager.loadTitle1(portrait_images_list); this.portrait_images.opacity = portraits_opacity; this.portrait_images.x = portrait_image_x; this.portrait_images.y = portrait_image_y; this.portrait_images.name = portrait_images_list; this.addChildAt(this.portrait_images, 4); } Scene_Title.prototype.createForeground = function() { this._gameTitleSprite = new Sprite(new Bitmap(Graphics.width, Graphics.height)); this.addChild(this._gameTitleSprite); };Scene_Title.prototype.createBackground = function() { this._backSprite1 = new Sprite(ImageManager.loadTitle1(title_back_sprite)); this._backSprite2 = new Sprite(ImageManager.loadTitle1(title_back_sprite)); this.addChild(this._backSprite1); this.addChild(this._backSprite2); }; Scene_Title.prototype.update_portrait_image_animation = function() { var x = new Date().getTime() / portrait_image_mov; this.portrait_images.y = Graphics.height / 2 - this.portrait_images.height / 4 + Math.cos(parseFloat(x)) * 70; }Scene_Title.prototype.update = function() { alias_scene_title_prototype_update.call(this); this.rotate_circle_object(); this.update_portrait_image_animation(); this.portrait_images.bitmap = ImageManager.loadTitle1(portrait_images_list); if (DataManager.isAnySavefileExists()) { this.command_continue_sprite.bitmap = ImageManager.loadTitle1(reimu_command_images[this._commandWindow._index]); } else { if (this._commandWindow._index == 1) { this.command_continue_sprite.bitmap = ImageManager.loadTitle1(continue_is_disabled); } else if (this._commandWindow._index == 0){ this.command_continue_sprite.bitmap = ImageManager.loadTitle1('Menu01_B'); } else { this.command_continue_sprite.bitmap = ImageManager.loadTitle1('Menu03_B'); } } this.animate_cursor(); this.update_cursor_location(); this.update_pad_android_tab_cursor();};Scene_Title.prototype.create_circle_object = function() { this.circle_object = new Sprite(ImageManager.loadTitle1(circle_sym)); this.circle_object.x = circle_sym_x; this.circle_object.y = circle_sym_y; this.circle_object.anchor.x = circle_sym_anchor_x; this.circle_object.anchor.y = circle_sym_anchor_y; this.circle_object.opacity = circle_sym_opacity; this.addChildAt(this.circle_object, 3);}Scene_Title.prototype.rotate_circle_object = function() { this.circle_object.rotation += circle_sym_rotation; this.circle_object.opacity += 3;}var alias_soul_scene_title_prototype_createCommandWindow = Scene_Title.prototype.createCommandWindow;Scene_Title.prototype.createCommandWindow = function() { alias_soul_scene_title_prototype_createCommandWindow.call(this); this._commandWindow.hide(); this._commandWindow.x = -Graphics.boxWidth; this._commandWindow.y = -Graphics.boxHeight; this._commandWindow.visible = false;};Scene_Title.prototype.createCommandImages = function() { this.command_continue_sprite = new Sprite(); this.command_continue_sprite.bitmap = ImageManager.loadTitle1(reimu_command_images[1]); this.command_continue_sprite.x = title_commands_x; this.command_continue_sprite.y = title_commands_y; this.addChildAt(this.command_continue_sprite, 6);}Scene_Title.prototype.create_indicator = function() { this.cursor_image = new Sprite(); this.cursor_image.bitmap = ImageManager.loadTitle1(cursor); this.cursor_image.x = this.command_continue_sprite.x - 45; this.cursor_image.y = title_commands_x; this.addChildAt(this.cursor_image, 6);}Scene_Title.prototype.animate_cursor = function() { var x = new Date().getTime() / cursor_divider; this.cursor_image.x = this.command_continue_sprite.x - 23 - this.cursor_image.height / 4 + Math.cos(parseFloat(x)) * 2; }Scene_Title.prototype.update_cursor_location = function() { if (this._commandWindow._index == 0) { this.cursor_image.y = this.command_continue_sprite.y; } if (this._commandWindow._index == 1) { this.cursor_image.y = this.command_continue_sprite.y + 40; } if (this._commandWindow._index == 2) { this.cursor_image.y = this.command_continue_sprite.y + 80; } }Scene_Title.prototype.create_titleDrawing = function() { this._gameTitleImage = new Sprite(); this._gameTitleImage.bitmap = ImageManager.loadTitle1(titleImage); this.addChildAt(this._gameTitleImage, 5);}Scene_Title.prototype.update_pad_android_tab_cursor = function() { if(TouchInput.isTriggered() && TouchInput._x > this.command_continue_sprite.x - touchpad_xmin && TouchInput._x < this.command_continue_sprite.x + touchpad_xmax && TouchInput._y > touchpad_ymin_a && TouchInput._y < touchpad_ymax_a) { this._commandWindow._index = 0; SoundManager.playCursor(); this._commandWindow.processOk(); } if(TouchInput.isTriggered() && TouchInput._x > this.command_continue_sprite.x - touchpad_xmin && TouchInput._x < this.command_continue_sprite.x + touchpad_xmax && TouchInput._y > touchpad_ymin_b && TouchInput._y < touchpad_ymax_ { this._commandWindow._index = 1; SoundManager.playCursor(); this._commandWindow.processOk(); } if(TouchInput.isTriggered() && TouchInput._x > this.command_continue_sprite.x - touchpad_xmin && TouchInput._x < this.command_continue_sprite.x + touchpad_xmax && TouchInput._y > touchpad_ymin_c && TouchInput._y < touchpad_ymax_c) { this._commandWindow._index = 2; SoundManager.playCursor(); this._commandWindow.processOk(); } }

I did it because there where some compatibility problem before, that I corrected doing this.
I know that its a minor problem, only a fool and simples "visual" effect... But what do you think?

 

[RastaMan]

That's strange. If you follow the example that I gave, it should be fine.

Can you take a print screen of the configuration of the plugin?

 

[PrimeHover]

@ArkDG

I think it is awesome!
And indeed, the video always pauses when the transition fro the title screen to the load screen happens. I did not consider keeping it going.

Your mixed plugin is really interesting, Plus, you're working with images in the title as well.

I'm glad both plugins now can work together.

Do you mind if I copy your script to the first post and make it a mirror, in case someone is also using your plugin?

Thanks again!

@RastaMan

So, in the parameter Video Name you have "menu". Is "menu" the name of the video you want to put in background? Also, the video needs to be "webm" extension and it should be inside the folder "/movies" of your project.

Another option is to make the example that I posted in the first post.

If you are still getting the same error after making the example, try to play the game, and in the title screen, press F8 and take a print screen of the console. Probably the error will be there!

 

[Remi Bitters]

This is a great script, someone I know has made something really cool with it already, in case you wanted to see how you've contributed.

 

[ArkDG]

@PrimeHover No problem, you can link it. I just don't know about what SoulPour would think hehe But the credits for you two are all in the script. Also, I did not make parameters for the video part, as I used Soul's script as the base. So to configure it people would have to open the script in an editor, what is not that friendly for normal users ><
Anyway, feel free to do it.

About the video, If I disable the command to pause in the plugin, the video will continue to play even if I enter the scene_load. But when I load the file the video still do not stops, and the sound of it makes everything a mess. ><

I tried to modify the Scene_Load (onloadsucces part of it) in a way that only when the player load his file the video stops. But I'm gettin errors of "can't 'bla bla' pausevideo of undefined". I'm not a "javascrpiter" ): I'm learning as I try to modify things. If you have an idea, or the code I posted serves to you make a new version of your script, I would be very glad. ^^
 

 

[PrimeHover]

@Remi Bitters

That's awesome! Actually, that's the first time I see a project running one of my plugins. This is really cool!

Thank you for sharing it!

@ArkDG

Cool!

So, I think I can help you out.

Let me check my plugin again and see what can be done in order to provide the video to stop after the scene load!

I'll probably send you a personal message to let you know about any progress.

Thanks again!

 

[RastaMan]

@RastaMan

So, in the parameter Video Name you have "menu". Is "menu" the name of the video you want to put in background? Also, the video needs to be "webm" extension and it should be inside the folder "/movies" of your project.

Another option is to make the example that I posted in the first post.

If you are still getting the same error after making the example, try to play the game, and in the title screen, press F8 and take a print screen of the console. Probably the error will be there!

I use file "menu.webm" which placed in "movies" folder.

There is debug messages.

 

P.S.: I changed filename to "undefinded.webm" and change option (name) in plugin to "undefinded" and in result i hear sound of my webm file, but there is no video and still black screen.

 

[PrimeHover]

@RastaMan

That's interesting.

The plugin could not open the video because it says the parameter is not defined.

But in your previous print screen, the parameter is there correctly.

Try to remove the plugin and download it again, making the same configuration as before.

 

[RastaMan]

And... There is default background title (/img/titles1) and default background music (audio/bgm), but there is no video.

 

[PrimeHover]

And... There is default background title (/img/titles1) and default background music (audio/bgm), but there is no video.

This looks wrong. There are some characters that should not be in there. Did this happen when you download a new version?
That's the file you need to download.