怎样用视频作为游戏标题？

老王的忧郁 · 发表于 2016-3-30 22:25:29

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

本帖最后由老王的忧郁于 2016-3-31 16:46 编辑

我找到一个非常有江湖味的影片，想在标题页面播放！

求教要怎么达成？
要达成下面的效果，截图是游戏播放视频的画面

想要在标题上播放视频，游戏开始选项等要显示在视频的上层。

特别感谢@siakochen ，他介绍的插件完美的解决了我的问题！

如下图，是标题播放的视频截图！！！

现放上插件，以供同好使用！如果使用了YEP_CoreEngine这个插件，请把Scale Title 设置为false。否则会出现bitmap undefined

JAVASCRIPT 代码复制下载

/*:
 PH - Video Title
 @plugindesc This plugin allows you to put a video at the background of the Title Screen instead of a static image.
 @author PrimeHover
 @version 1.1
 @date 11/12/2015
 ---------------------------------------------------------------------------------------
 This work is licensed under the Creative Commons Attribution 4.0 International License.
 To view a copy of this license, visit [url]http://creativecommons.org/licenses/by/4.0/[/url]
 ---------------------------------------------------------------------------------------
 @param Video Name
 @desc Name of the video (See Help Section) | (E.g. "myVideo")
 @param Video Muted
 @desc Mutes the video in the title (0: No, 1: Yes)
 @default 0
 @param Video Loop
 @desc Makes the video plays in a loop (0: No, 1: Yes)
 @default 1
 @param Video Poster Name
 @desc Name and extension of the image to be shown when the video is loading (E.g. "poster.png")
 @param Video Width
 @desc Width of the video in the canvas (Default: 816)
 @default 816
 @param Video Height
 @desc Height of the video in the canvas (Default: 624)
 @default 624
 @param Video Coord X
 @desc Coordinate X of the video in the canvas (Default: 0)
 @default 0
 @param Video Coord Y
 @desc Coordinate Y of the video in the canvas (Default: 0)
 @default 0
 @help
 The video you want to play in background must be inside the "movies" folder in your project.
 Supported extensions: "webm"
 The poster you want to show while the video is not ready must be inside the "pictures" folder in your project.
 */
 
(function() {
 
    /* Getting the parameters */
    var parameters = PluginManager.parameters('PH_VideoTitle');
    var videoName = String(parameters['Video Name']);
    var posterName = String(parameters['Video Poster Name']);
    var videoMuted = Number(parameters['Video Muted']);
    var videoLoop = Number(parameters['Video Loop']);
    var videoWidth = Number(parameters['Video Width']);
    var videoHeight = Number(parameters['Video Height']);
    var videoX = Number(parameters['Video Coord X']);
    var videoY = Number(parameters['Video Coord Y']);
 
    /* Video Title Class */
    var PH_VideoTitle = null;
 
    function VideoTitle() {
        this.name = videoName;
        this.posterName = posterName;
 
        /* 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 + '.webm';
        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;
        }
 
        if (posterName.trim() != '') {
            this._video.poster = 'img/pictures/' + this.posterName;
        }
    };
 
    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();
    };
 
 
    /* Overwritten Scene_Title methods */
    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);
        this.createForeground();
        this.createWindowLayer();
        this.createCommandWindow();
    };
 
    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();
    };
 
})();

/*:


 PH - Video Title


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


 @author PrimeHover


 @version 1.1


 @date 11/12/2015


 ---------------------------------------------------------------------------------------


 This work is licensed under the Creative Commons Attribution 4.0 International License.


 To view a copy of this license, visit [url]http://creativecommons.org/licenses/by/4.0/[/url]


 ---------------------------------------------------------------------------------------


 @param Video Name


 @desc Name of the video (See Help Section) | (E.g. "myVideo")


 @param Video Muted


 @desc Mutes the video in the title (0: No, 1: Yes)


 @default 0


 @param Video Loop


 @desc Makes the video plays in a loop (0: No, 1: Yes)


 @default 1


 @param Video Poster Name


 @desc Name and extension of the image to be shown when the video is loading (E.g. "poster.png")


 @param Video Width


 @desc Width of the video in the canvas (Default: 816)


 @default 816


 @param Video Height


 @desc Height of the video in the canvas (Default: 624)


 @default 624


 @param Video Coord X


 @desc Coordinate X of the video in the canvas (Default: 0)


 @default 0


 @param Video Coord Y


 @desc Coordinate Y of the video in the canvas (Default: 0)


 @default 0


 @help


 The video you want to play in background must be inside the "movies" folder in your project.


 Supported extensions: "webm"


 The poster you want to show while the video is not ready must be inside the "pictures" folder in your project.


 */


 


(function() {


 


    /* Getting the parameters */


    var parameters = PluginManager.parameters('PH_VideoTitle');


    var videoName = String(parameters['Video Name']);


    var posterName = String(parameters['Video Poster Name']);


    var videoMuted = Number(parameters['Video Muted']);


    var videoLoop = Number(parameters['Video Loop']);


    var videoWidth = Number(parameters['Video Width']);


    var videoHeight = Number(parameters['Video Height']);


    var videoX = Number(parameters['Video Coord X']);


    var videoY = Number(parameters['Video Coord Y']);


 


    /* Video Title Class */


    var PH_VideoTitle = null;


 


    function VideoTitle() {


        this.name = videoName;


        this.posterName = posterName;


 


        /* 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 + '.webm';


        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;


        }


 


        if (posterName.trim() != '') {


            this._video.poster = 'img/pictures/' + this.posterName;


        }


    };


 


    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();


    };


 


 


    /* Overwritten Scene_Title methods */


    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);


        this.createForeground();


        this.createWindowLayer();


        this.createCommandWindow();


    };


 


    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();


    };


 


})();

siakochen · 发表于 2016-3-30 23:26:47

歡迎參考一下我的遊戲
https://rpg.blue/thread-390613-1-1.html
我的遊戲標題選項背景就是影片

老王的忧郁 · 发表于 2016-3-31 00:57:50

siakochen 发表于 2016-3-30 23:26
歡迎參考一下我的遊戲
https://rpg.blue/thread-390613-1-1.html
我的遊戲標題選項背景就是影片

大神，你的游戏哦下载了，感觉很棒，请问你是怎么做到的？
要用你写的插件吗？

siakochen · 发表于 2016-3-31 11:36:37

老王的忧郁发表于 2016-3-31 00:57
大神，你的游戏哦下载了，感觉很棒，请问你是怎么做到的？
要用你写的插件吗？ ...

非自己寫的，此插件為作者為PrimeHover
提供你下載位置 :
http://forums.rpgmakerweb.com/in ... 338-ph-video-title/

我自己是有再編修更改成符合自己遊戲的方式

你可以去下載來試試..

帐号		自动登录	找回密码
密码			注册会员

[已经解决] 怎样用视频作为游戏标题？

加入我们，或者，欢迎回来。

点评

评分