Video extension

[Bouh]

Continuity of PR Video extension #934 and #948

• Add video loading to pixi-image-manager.js (game engine) and in the IDE (PixiResourcesLoader)
• Add video resource handling in game engine
• Add video resource handling in IDE
• Handle positioning of video after video is loaded ("listen" to the changes of noFrame or something like this)
• Waiting pixi v4.8.6 for autoplay aurgument
• Handle callback/errors in the rendered instance for the scene editor
• Handle closing of scene editor (should stop videos)
• Add warning about multiple objects using the same video
• Example (WIP)
• Wiki
• English wiki page
• Warnings/explanations about format and the need to have a user interaction before playing the video.
• Add the to web-app an example of a video in the library of videos that the user can choose from.
• Support cocos2d-js renderer

[Bouh]

I've updated pixi but impossible to start GD
index.js:1446 Unable to load GDevelop. Please restart the application or reinstall the latest version if the problem persists. raw error: TypeError: Cannot read property 'Texture' of undefined at Module.eval (PixiResourcesLoader.js:10)

[Bouh]

• We can use all properties now !
  Volume, Opacity, Looped, and videoResource (thx @4ian )
• I've a problem with position in preview it's not equal to scene editor.
  All is correct when customSize is true, but if this is false the preview don't load.
  
• And here my actual example for testing updated.
• In ressources my video is red but the file exist and the path is good and when we remove "Assets Invalid path" the video are deleted.

[4ian]

So pause seems to work now, not sure why it was not the case before. I'll assume I forgot to update something!

I'm making a bit of cleaning, we don't need to change volume nor looping of the video rendered on the scene because it's actually not playing. Same thing, we don't need to pause the video when the instance is removed from the scene editor because it's not played.

[4ian]

Made quite a few changes to robustify the whole extension and avoid relying on internals/private members ;)

GitHub again messed up the changed files of the whole PR, they can be seen here:
https://github.com/4ian/GDevelop/compare/master...Bouh:Copy_video_extention_2?expand=1

What we're missing is now an icon for the object, and a warning within the editor about the format of the videos and another one like this: "For one video resource, only one video exists in memory. If multiple objects with the same videos are used, they will share the same status (paused/played/current time, etc...)".
I can take a look at both, unless you want to design an icon (some SVG resources here: #980 (comment) to follow the same design as other icons)

[Bouh]

I can see for the icon, I will see the icons for the other game engines, and I will make a unique for GD with the colors. I've already illustrator installed its perfect !

[4ian]

Sweet! 👍 Use the SVG here #980 (comment) as a basis :)

[Bouh]

And voila :)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 19.1 16" style="enable-background:new 0 0 19.1 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#27AAE1;}
	.st1{fill:#2B3990;}
	.st2{fill:#FFFFFF;}
	.st3{opacity:0.1;}
</style>
<rect id="base" x="2.9" y="1" class="st0" width="14" height="14"/>
<rect id="frame" x="3.9" y="3.7" class="st1" width="12" height="8.6"/>
<g id="hole">
	<rect x="14.5" y="4.3" class="st2" width="1" height="0.9"/>
	<rect x="4.4" y="4.3" class="st2" width="1" height="0.9"/>
	<rect x="12" y="4.3" class="st2" width="1" height="0.9"/>
	<rect x="6.9" y="4.3" class="st2" width="1" height="0.9"/>
	<rect x="9.4" y="4.3" class="st2" width="1" height="0.9"/>
</g>
<g id="hole_1_">
	<rect x="14.5" y="10.7" class="st2" width="1" height="0.9"/>
	<rect x="4.4" y="10.7" class="st2" width="1" height="0.9"/>
	<rect x="12" y="10.7" class="st2" width="1" height="0.9"/>
	<rect x="6.9" y="10.7" class="st2" width="1" height="0.9"/>
	<rect x="9.4" y="10.7" class="st2" width="1" height="0.9"/>
</g>
<polygon id="triangle_1_" class="st2" points="8.6,9.6 12.1,7.9 8.6,6.3 "/>
<g id="highlight">
	<g class="st3">
		<polygon points="16.9,15 2.9,1 2.9,15 		"/>
		<polygon class="st2" points="16.9,1 2.9,1 16.9,15 		"/>
	</g>
</g>
</svg>

[4ian]

That was fast 😄I'll add it then. Thanks! 👍

[4ian]

I've added the icon. I'm going to merge this, though there are still a few things to do before the extension is ready:

• English wiki page
• Warnings/explanations about format and the need to have a user interaction before playing the video.
• Add example.
• Add the to web-app an example of a video in the library of videos that the user can choose from.
• Add an empty cocos2d-js renderer (to avoid crash if video is used in a cocos2d export)

Ideally we would need some loading indicator while the video is loaded before it's shown in the scene editor.
For now I've flagged the object as experimental so that people that use it know that they must refer to the wiki to known about a few things, before using it.

Thanks a lot for you work on this :) This is going to be very useful for games that want to have cut-scenes!

[Bouh]

It's great thanks for the progress on the code !

• About the file format it's already done in the description of action Play and the wiki Maybe we can find a better location for this. Like in properties pannel ?

• About interaction before playing, i see Hints files
  I've tryed to add in getExtraInstructionInformation :

if (type.indexOf('Video::Play') === 0) {
    return {
      warning: t`The video can't be played automatically at the beginning of the scene, because the user need to interact with the game before (this is restriction of navigator: https://goo.gl/xX8pDD).`,
    };
  }

But like warning about file format this will be better in properties pannel, imo.

• Video ressource for web-app : We can use this trailer from Blender foundation, i've tested the file it's working. Download

• Example : I've reopen my example i wish improve the fullscreen but we can't resize the video because the event of scale or size can't be used with this new object type.

[4ian]

For warnings no worries I'll be adding them soon :)

(and as you've properly guessed, the Hints file is useful for this ;))

Video looks nice, although a bit big.

event of scale or size can't be used with this new object type.

Unless I'm mistaken, any object that want to support being resized with events must add actions to do so. (Expressions are available for all objects, but some objects might not have a notion of width/height, like shape painters)

[4ian]

We can go ahead with your example as is, let's just center the video and make the background black :)
Let me know if you can do it, I'll add it and will release a new version probably soon.

[Bouh]

I can do it, give me few minutes, i will check all for the last time.
(The actual Master branch crash in game properties screen)

[Bouh]

Here the example, i've used the Tweens, thank @Wend1go it's very easy to use !
Online example on itch.io

[4ian]

Sorry for the crash I have to update libGD.js

I'll look at the example tomorrow, but I just tested the online version with my smartphone and it's working well!
Using tweens are a really good idea 😀

[4ian]

@Bouh I love the video (really funny haha) but it's 8mb, quite large if I bundle the example with GD. Could we find a ~1mb short video?

[Bouh]

I will try to do that now

[Bouh]

Here, i've just crop the video and use the compression. 1,02 Mo ~10sc
Video download

[4ian]

Awesome, I've added the example :)