Original subtitles

In this lesson we are going to talk about fullscreen and resizing

Currency where's our canvas taking

Hate Android device

Because we put it in the car

We want our Converse to take the hole ever about space

You're not forced to do that you can have like a legend canvas just on the park of your website maybe you have to scroll to

But in the following lessons we won't very immersive experience

We are going to take all the available space

But I will can bus

4-hour renderer

Set up 8 hour

And we can rotate around because I've also added

The obby controls

From the previous lesson so it's just so you can rotate a run zoom zoom out with the

With the right click

And this is just fine

Alright let's

Try to make our canvas

Feet in the viewport

Subtitled by -♪ online-courses.club ♪- We compress knowledge for you! https://t.me/joinchat/ailxpXoW3JVjYzQ1

First and talking about viewport this is the viewport

You can say window but it's not

True Because window is

This

You can say screen and it's natural to because this is the screen so we are going to talk about the view

Stop with which is

The contents you can see

Alright the best thing we can do which is pretty easy

Instead of using

Window

800 and 600

We can use window

Which way

Gets the the sizes of the viewport I know it's window but it's the viewport

If I say

As you can see my canvas resize

Can I have

Something not bad but we have a problem look on the top and Lee

As you can see there is

A march on the dub in a march on the left

And if you scroll

This way I can scroll using this cover

As you can see I can score

Which is not very good looking so we are going to fix that

It's a matter of staying the problem is that the brother

Has a default styling

When you use 01

You get a big title

When you use a paragraph you get the margin and all the title

In any case we have

Imagine on the body this is what you can see here

To fix that we're going to go on the CSS file remember that the CSS is being in

Directly from The Script gs5

Here is the first line

An Ender CSS we can put anything we want like if I want to to use

Red background I can do that on the body and you say that

We now have a red

Bagram

On the

It's not what I want

One solution and Robin to see multiple Solutions and mixed

One solution is to remove all margin and padding on every objects you can do that simply bye

Using the star Aesthetics in the USA

Margin 0

And padding

Adam saleh

0 just like this

As you can see it's better

I don't have this strange modern I had

Here but still I can scroll so

Pretty good solution but it's not perfect

Let's try to fix that

One other solution so you don't have to meet those two solution but I'm going to show them both to you

If you just use this solution I'm going to show you

It should be

What's the let's keep our imagine 0PZ

We are going to target

The canvas remember that we pull we put class on the canvas

Are we having to target the canvas like this

NCP

Put it

On the top left by using position

Fixed

Stop

0

And left

0

Just like

We could have used

Absolute

It would work the same if we depends on the rest of your website

So I decided to use fix because it's even

More strong let's say but you could have to use absolutely you will get the same

And as you can see the scroll bar is gone so

Even better

Alright

When you drag and drop

Some of you might see blue outline

It depends depends on the brother the version your OS many things

Anyway we want to get rid of it for every visit of going to your website

How we can do that so as you can see me I have it right

But the solution is pretty simple all we need to do is

Outline

None

Directly on the can

Just like this

Can you put outline none

And as you can see when I drag and drop I don't see the outline anymore to blue outline

Which is

Let's go further

There is one

Last thing I want to fix

Not all of you will be able to see this problem but when I scroll using the Trackpad

No it's not talking I have to deactivate The Hobbit

You don't need to do it but I will show you anyway

Activate deactivate control you can do

Controls enable at quote Force

As you can see I don't have the controls anymore and dragging dropping it's not working

What I want to show you is that if I use my Trackpad so it's on me

I'm using a MacBook Pro

As you can see I can't scroll beyond the limit of the page

Which is

Not very good not very massive

When I have the controls enabled

It doesn't work anymore because the school even is being cat

It's not much of a problem but if you are just animation and you

Control

You will have this problem

If user being able to scroll

We can fix that by prison preventing the screw

Brenda school what we can do I will put

Yeah I would myself here

Is Target the HTML

Target the body don't forget to come over here

And add

Overflow

Hidden

This will prevent any school as you can see I'm scrolling right now

You cannot see it better trust me I cannot scroll beyond

Using Trackpad

All the mouse it's impossible to go beyond

Ok

That's it

We have our canvas sticking

All available space and we cannot call anymore we don't

Robots we don't have margins it's looking just great and

Immersive

Nice

The problem is so I'm going to close the style I'm going to close the sidebar

I'm discreet and I'm going to remove this controls and

False because I want to be able to control the camera with all bits

I can use a Wii console

Again

The problem I have now look at this if I resize

My window

I get something like this and maybe on the vertical Direction yeah get the same for

And if it's too small

Cannot see the cube anymore

Do we need to handle the resize

To do that first we need to be aware

That's the result

Resize

It's pretty

Straightforward what we can do here so let me see I'm going to book yet on the sizes part

Just after creating the sizes Viber

I'm going to listen to The Races

7th this is naughty Travis

For now it has nothing to do with 3DS so I can listen to window

Add event listener

Rosyth

This sorry the suggested is you

I'm going to go this is the name of the event

I'm going to send a function on

Second argument

I'm using that arose as a race but you can use classic function I think

Going to be fine yeah I think it's going to

Inside of this I'm going just to put a log because I want to test if everything is working

Window

Has been resized

Let's check the result I'm going to recite the windowsill you have to resize the window to the

And as you can see

Logs tell me that window has been resized

Which means that the function is working just fine

But we didn't put anything in the functions of the program is still here

McCandless is not resizing Miranda is not resizing

What we can do now

First we have this objects that contains the wheat and the 8

We're going to update that

Let's go fight

Update sizes

Sizes that reads equal and you are going to do the same

Lidl's values

Oh no change

Why we need to update sizes

I'm going to sing to do the same for the hate

Like this

I save

No Rob but still it's not working just a dating this object won't change a thing because it's one of

Object

Yes we use it later in the card but we need to update the different element of our sin

Environment

Weekend

David Cameron

Sorry I'm going towards update camera

Subtitled by -♪ online-courses.club ♪- We compress knowledge for you! https://t.me/joinchat/ailxpXoW3JVjYzQ1

And what you need to a date in the camera is the Aspect because remember

That's in the parameters of the perspective camera

We specify the Field of you alright but we also specify what we couldn't ask

Which is the

÷ the

And when we resize our page

This value

Change

Because it's not the same aspect while doing something like that it's not always the same as 10

How to fix that

We are going to update

Camera

Aspect property just asked

And we are going to put the same

Thing we do the here when instance shutting

Is going to be the sizes with / the sizes

We are getting some

Ok

No change

The problem is that when you are updating

The Aspect

You have to let

3GS

The camera

That's they need to update the price

Projection

We talked about matrix in a previous lesson

Mattresses are the does that do production modification for

Hall things it's very complex

And the good things is that we don't need to handle mattresses on our own we just

Move the position change the rotation change the scale

And mattresses get a date

What we're going to do now it's just a camera

Update products on Netflix

And we don't need to do anything from Jess with do the door

Hard calculations on its own

Let's see the result

You're going to see something yeah something is Happening

It's like the Tube is being stretched

Mary Street

Anyway we can continue because the problem is that our canvas is not taking the space ODEON

Google space

The fix that's what we need to do is update our random

And we already did that if you checked below

Are under after creating it after instance shader

It's weird cutting sets eyes

And we're going to do the same I can just copy this line

Get back to my resize function

Update renderer

And put it there

Look at this

It's working

Nice

N h q

Is enter the stars

Stretched or squeezed

It's working fine you can do it about two colleagues going to work

The same

Ok so this is great me now

Endo the resets remember you have to update the object if you are using a reference object

Sort the wheat and

We are dating the camera until I get to update product metrics if you do so

Energen we are updating the renderer

Set

Which way also a data can be

Don't don't forget that you have a canvas in your page

Updating the run out of data can bicycle

Great

Let's talk about Excel ratio

This is

Very interesting subject

Some of you

Might seem seem sorry of blurry

It's not very purse

You can also see stairs if I came straight to you I hope it's not going to

You can see them even with the compression of the video

But here I can see stuff

Effects on the ages

At 8 on your computer

Some of you might see those very random because you're using a computer with a pixel ratio

Greater than 1

Alright not out of you me I'm using a picture ratio of

One so I don't see a very random but still I can see this this is still like

Yeah

The pixel ratio question two how many physical pixels you have on the screen for one

Excel unique

Of the software part

Let me try to explain this to you

Drawings

Alright

I'm going to start with the screen

This is your screen I'm not very good at drawing I've done my best

This is your screen like that

Alright we can do a little stand something like that

You have pictures on the screen so we are going to separate the screens in pixels

Like this

Have you seen your pixels

This is so hard

Something ideas something like this something like this

And again and again so you have many pictures like this

Alright I'm just going to focus on the first 9 pixels

Say something like

1

2

3

That's it for now

5

Sex

7

9

This is a classic computer classic screen with

That much pizza

Rip

The thing is let's talk about some history before the Windsor drawings

4 years

Who screen had a pizza a ratio of 1

And if you look closely you could see to speak so so if you look closer to your Toyota your screen you could see that

It's still the case if you're using a computer with a picture ratio of 1 we can see that

If you get very close to the screen

Constructors

Apple so not watching TV and started using screens with a pixel ratio

2

Enable

To be more precise

Bye that's it mean that

I'm not going to show the joints after

Now some constrictors are making even higher pizza ratio and it goes even be on

Free

This is just marketing you don't need a picture I shall be your mum

Ratio of 2 means

4 time more pictures to Ronda and a pixel ratio of 3

Mince 9 times more pizza to rent a country

Rhino

For the first Pixar

If you have just want to say with well it's really easy you get

This pixel to draw

So your GP you will draw this picture and put it on your cannabis if you have a pixel ratio of 2

You divide it picks pixels

Like this

Can you get

4xl to London

For one pixel of your canvas

4 pixels to Ronda

And if you have a picture ratio

You get something

Diss

9 pixels to render which is a lot

What the same render you should wait on a pixel ratio of 1

You get just 1% or under

And on pixel ratio

Three you get 9 pieces to run that this is very hard for your GP

It takes time to do this operation

And if you ever more pizzas

Something like this

3

1

23

And this is just crazy and you get a lot of pixels to run the everywhere

Just thought one and software picture we're going to say

That's a

But still we need to handle this because if you are using a return

A retina display which is a picture ratio

And you are just doing this huge things

You will get something like this

The same pizza being grown on all four pictures

Just going to

Blurry

Bad it could be better

What do you want to do is draw separate things on those pizzas because we can be more precise

How to do this

Keeping mind

It can go

Too far

How to reset me

Get back to this

Yeah that's the problem is that highest pixel ratio or early on the week

Devices which are mobiles

So you have mobiles with pixel ratio that goes up

5

This is so wrong

It's just marketing

It's just marketing you don't need that much even if you you look very close to your phone

You wanted difference between Repeater ratio of 2 and 8 pixel ratio for free

An acceleration of 5

Acceleration of 2 is kind of the limit

It's a good limit we don't need more so be careful when you buy a smart phones and screen

Maybe 300

Alright

Let's hendo the pizza we show on our code parts

To get the picture ratio we can use

Window

Device pixel ratio if you write this in the console window devicepixelratio

You can see that I have a picture ratio of 1

Try it open your console and write window devicepixelratio

And you will know if you have a bit of a shop 12

Can I have a chilli pizza ratio

2.5 to .3 stuff like that

To update our render so we are going back to the

Where we instantiate our under

We are going to you

Tuchel

Rendering

Set pixel ratio

Weekend

Provide the pizza ratio

And let 3GS do it's things and we're going to use window recycling

Device pixel

Ratio

Just like

For me it's not going to change anything

Or the one

For the one of you

Has a pizza ratio above one you're going to see

Abet accredited

Damn picture

And you're going to your won't be able to see those stuff

Dream spell because we have a more precise

Picture

Which is

The problem is that he we are testing this god on those crazy devices with pixel ratio

5 we're going to do so many random like way too much are pictures to run

We need to limit

And we are going to limit the value the window device pixel ratio 2

You can do more

Trust me

Just

Enough

Google Maps

We are going to you

Map

That mean

Which will output the minimum value between the two parameters of the first parameter is

To be the picture ratio of window

Anderson parameter is going to be due

If the patella ratio is 1

The meaning of value between 1 and 21 so it's going to be one

Is the picture ratio of your screen is to the minimum value of between 2 and 2

But if your pixel ratio is

Above tool

It's dysfunction Wheeler redone

The minimum value with

Great

I recommend you to always have this don't put the window pizza ratio along

We have a performance issues on devices with very high deceleration

Alright

What we can do is put discount set devicepixelratio with me

MacMillan

And put it inside the recess

Why I like to do that it's because sometimes people

Have different screens

And they can just take a window and put it in the second screen

With different iteration

It's my case I have my MacBook Pro on the side with a picture ratio of 2

And my main screen in front of me with the picture we show off

When I'm taking it said this

And putting inside on my MacBook Pro screen

Are we have a different iteration and I want to enjoy a good credit

Miranda

So where I'm doing is at

Because most of the time why you're moving

Windows from a screen to another resizing to fit properly

If we also test the window devicepixelratio and if the device pixel ratio change

It's going to be applied to our randhawa sweets just the tips

So when people

Change the window from screen to another

They get the right pixel race

Ok you can just save you can test it if you don't have a higher density picture ratio

It's ok just trust me it's going to work

If you ever the equation to test

Alright we are almost there but we are going to go a little further

We're going to handle full screen because

We want to create email expenses that so you are building a game you want to play out to be about 2

So your game with a full screen no window no frame so we want to be able to to go to

How can we do that

First

How are we going to toggle the full screen

We can have a button we can have a shotgun we could do any of this but in our case

Listen we are going to listen to The Devil

Because you can listen to the Baltic event in job

The weather going to start with very simple JavaScript and I'm going to do it

Yeah I'm going to continue in the sizes pots

After the window addeventlistener resize

I'm going to listen to the Dead

Double

Event on window

Do that I'm doing wind

Add event

List now

The event is

GB

See dblp

That's very strange

It's old JavaScript

I'm going to send a function with a fat arrow

And here I'm simply going to say

Double click

Just to test always text we never know

As you can see when I double click which is what I'm doing

I guess

Cancel

Which walking make sure this is

Working

So what we can do now

First we need to know if you want to go to for skin or leave the first cream because if the user is already in force

Because it double tick already you want to leave them

Renault mechanic

That's because we cannot go to the full screen

We are going to go a little further and we just as if this is working what am I going to do is do

If

Nothing

I'm going to negatives with a w on with

And exclamation point

Go

Full screen

An elf

It's going to be

Leave

Phone screen just like that we cannot test it right now but will be able to test it short

How can we go to the first come out because we are not in force when you want to go to the full screen mod

What ski have to do is use the request

But you have to do this

On the council element because you can take

Elements of your page

And put it in full screen can you just a video it can be a conversation be like

How many children

Your case we want our campus to go to the full screen and we already have our canvas

Canvas value

We can do

Canvas because this is our element we want to go to the full screen

Request

Full screen just like this

Go full screen I can't remove the

It's going full screen

To leave the full screen you can press

Escape

And now going to handle

The double tick to leave the phone

And to do that

Weekend

Document

Exit

It's not on the canvas it's on the document this time

Exit full screen

Just

And double clicking

Goes for screen and about cooking again

Leave the force

Which is working just fine

Play talking

Unfortunately

This won't work

On Saturday

Yeah sorry is always late on simpler

Pictures like that

By the time I'm recording this it's not working on some bits for you maybe I don't know

I hope in the future it will

Talk to fix that we are going to use prefix

Version

I won't go into the details about that

But it's going to work don't worry

You don't care about Sophia

We cannot choose document for screen we need to use something like a document

Webkit

What screen or something like that

It's so hard

What's the weather going to do is create a valuable

It will look like this fullscreen elements

And we are going to use document.on I meant which is what we do

Aaliyah

That

This

Is exactly what we are

And we are going to add

Vype vape sites all

Document and it's the same thing but we prefix with webkit and going to look like this

Webkit

Full screen

And I'm forget to put the f up

Alright

And this we are going to put it

There

Instead of our previous there

We cannot use

This directly inside

Going to throw and Anna on on Sunday brother

We can address the do it directly in the

We have to put

In a Bible

I don't know exactly why

Secondly we cannot call

Was Queen obviously we have to call Eve

Canvas

Request for screen so

This

Does exist

Correct

I'm going to do Earth

Canvas request for screen but I'm going to add

Wedges

Request was cancelled it's the same but with

And if it's webkit request full screen I'm going to call

So if the brother already super

Requestfullscreen it's going to call

Request

But if not

Is going to 2

If webkit for screen

Box exist and it's going to call it

I'm not going to do exactly the same thing for The xx

Document

Exit full screen exist

We are going to call

It's going to be something like this

And if not

We're all going to die

The same thing as before

It's the same version but we

Weather

And we get something

Practise

This is a lot of God

Trust Windows Safari

But now it's going to work on

Chrome safari Firefox even age

Edible cake

It's working

I'm going to open Safari

Just to check if everything is right

You can open the same

Ul answer phone

Going full screen

Patrick it's living full screen

Alright

Everything to should work just fine I'm all more than bro

Internet

Listen we're going to talk about

Joma