MDM HTML5 Themes

Help make Linux Mint look better.
User avatar
racer-x
Level 4
Level 4
Posts: 256
Joined: Sun Oct 02, 2016 9:05 am
Location: Area 51

Re: MDM HTML5 Themes

Postby racer-x » Sun Jan 22, 2017 10:34 am

I know a lot about video and animating, but nothing about HTML. I was wondering if it would be possible to use an existing loppable video animation as a background. I can export as .webm or whatever if that would make it easier.

Example video (4.2MB): http://forum.videohelp.com/attachments/40387-1485095232/Clock_TW.mp4

User avatar
samriggs
Level 6
Level 6
Posts: 1197
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada
Contact:

Re: MDM HTML5 Themes

Postby samriggs » Sun Jan 22, 2017 4:56 pm

hey racer-x thats what shideneyu was trying to do initially
We still don't really know if a video can be used or not as a mdm background.
shideneyu did it by tearing it apart into pngs and coding a for loop to make his and caching it first.

I know phaser has a video function and uses canvas so it might be possible with phaser's framework but you would have to know some html5 to pull it off

I listed some code examples in one previous post for video in phaser but any html5 mdm themes require some html5 programming, otherwise it is just taking someone else's code and changing images, which is great also.

It would more then likely have to be mp4 to run if it is possible, if I ever get some time freed up I'll see if it is possible and if so I'll put up and example and tutorial but so far my time is limited.

If you want to learn html5 (or the javascript part of it) here is a good place to start http://www.w3schools.com/js/ sorry it is not an https site but it is good.
If you want to use phaser's framework you will have to know there functions to make things work which they put up a ton of examples to learn from here http://phaser.io/examples
The tutorial I wrote on my blog only uses a one page code for all the animations since that is all it needs.

Here is an example of using video as a background https://codepen.io/dudleystorey/pen/knqyK
Here is the blog about it http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

Hope it helps somewhat
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
Manjaro XFCE / Mint Cinnamon
asus X751LX and an acer and a toshiba and another asus

User avatar
racer-x
Level 4
Level 4
Posts: 256
Joined: Sun Oct 02, 2016 9:05 am
Location: Area 51

Re: MDM HTML5 Themes

Postby racer-x » Sun Jan 22, 2017 5:49 pm

Dang... I was hoping for an easy answer like ("Bla,Bla_video.webm" -loop 0). Bummer. I guess I'll have to learn HTML to make it work. No problem exporting to PNG image sequence, but too old to learn the HTML thing......

Oh well, thanks anyway!

User avatar
samriggs
Level 6
Level 6
Posts: 1197
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada
Contact:

Re: MDM HTML5 Themes

Postby samriggs » Sun Jan 22, 2017 7:42 pm

:lol: your never to old to learn racer, I'm almost near retirement and just started learning html5 game development, I know quite a bit of programming languages and to learn it is just another language but once you learn the data types, operators, loops etc... there all pretty much the same with few differences and pretty much use all the same old data types, operators, loops etc...
The only real difference is object oriented programming and lateral programming like the difference between C and C++
Then you got VB which uses dim but that's for windows.

It shouldn't take too long to learn the basics

This is an operator += and -=
look at it this way += means move ahead (like a car) and -= means move in reverse
So lets say you want an image (will call the image sprite ball) to move across the screen
The screen has two measurement points x and y, x is horizontal y is vertical, in html5 they all start from the top left corner
So you place ball at 0 and lets say 50 pixels down from the top

Code: Select all

ball.x = 0;
ball.y = 50;


Now in the update function (which updates constantly)
you want to move that ball sprite past the end of the screen and start the whole thing over again

Code: Select all

ball.x += 10;

This means the ball will move across the screen at pixels speed.

Here comes the condition

Code: Select all

if(ball.x > screen.width + ball.width){
ball.x = 0;
}


so if the ball x position is greater (>) then the screen width measurement plus the images width (remember it starts at the left top corner so you have to include the images width) then the ball's x position goes back to 0 and starts it all over again.

There is a few different ways of doing this like tween functions or for loops etc but that is a simple example of how to move a ball across a screen.

You should include the ball's width for the beginning also, this is just a quick sample (missing the create function, loading image and all the other stuff) just to show you it really isn't that hard once you get into it.
Orrr you can use css3 animations which is what I did the majority of my first mdm themes in since I was having issues with canvas back then.
http://www.w3schools.com/css/css3_animations.asp
which uses a lot of tweening.

There are a ton of tutorials out there for html5 to help you out.

here is a good starter tutorial for phaser https://phaser.io/tutorials/making-your-first-phaser-game if you want to make mdm's and use canvas I would suggest using phaser as it makes life easier to code the thing and less to learn the resizing is already included for different screen sizes and ratio aspects plus if you want to take it further later on it makes games and it just works.
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
Manjaro XFCE / Mint Cinnamon
asus X751LX and an acer and a toshiba and another asus


Return to “Artwork”