tforgione
/
3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved replay view

This commit is contained in:
Thomas FORGIONE 2015-05-19 16:57:30 +02:00
parent 94bc5084fe
commit dced15724a
1 changed files with 61 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
controllers/prototype/views/prototype.jade
View File

@ -35,75 +35,76 @@ block extrahead
link(rel="stylesheet" href="/static/css/prototype.css") link(rel="stylesheet" href="/static/css/prototype.css")
block content block content
#main-div.panel-group #main-div.panel-group(style={'margin-top':'10px', 'margin-bottom':'10px'})
#instructions.panel.panel-default(style={'margin-top':'10px', 'margin-bottom':'10px'}) if cameraStyle != 'replay'
.panel-heading #instructions.panel.panel-default
h4.panel-title .panel-heading
a(data-target="#", data-toggle="collapse",onclick="setTimeout(onWindowResize,500);") Instructions h4.panel-title
a(href="#", data-target="#collapseInstructions", data-toggle="collapse",onclick="setTimeout(onWindowResize,500);") Instructions
.panel-collapse.collapse.in#collapseInstructions .panel-collapse.collapse.in#collapseInstructions
.panel-body .panel-body
p p
| This is the prototype of a 3D interface. You can move | This is the prototype of a 3D interface. You can move
| the camera with the arrow keys of your keyboard (or | the camera with the arrow keys of your keyboard (or
| WASD if you like FPS-games, and by the way, if you | WASD if you like FPS-games, and by the way, if you
| use azerty keyboard, you can also use ZQSD instead), | use azerty keyboard, you can also use ZQSD instead),
| and change the angle of the camera by dragging and | and change the angle of the camera by dragging and
| dropping the scene around it (you can also use your | dropping the scene around it (you can also use your
| numpad, 2 to look lower, 8 to look higher, 4 to look | numpad, 2 to look lower, 8 to look higher, 4 to look
| on the left and 6 to look on the right, but if you're | on the left and 6 to look on the right, but if you're
| more comfortable with non-numpad keys, you can also | more comfortable with non-numpad keys, you can also
| use i for up, j for left, k for down, and l for | use i for up, j for left, k for down, and l for
| right). | right).
p
| This is a re-creation of the Bob-omb Battlefield
| level from Super Mario 64, and with its 8 red coins.
| You can click on them to get them, and once you got
| them all, you get... well you get nothing but the
| sound of the star is played (but the star doesn't
| appear... sorry guys)
p
| It contains <em>recommended views</em> : 3D objects
| here to guide you through this coin search.
if cameraStyle == 'arrows'
p p
| Recommended views are displayed with a | This is a re-creation of the Bob-omb Battlefield
| transparent blue arrow. They disappear when you | level from Super Mario 64, and with its 8 red coins.
| come closer to them, and shows the motion between | You can click on them to get them, and once you got
| your current position and the recommendation. | them all, you get... well you get nothing but the
| sound of the star is played (but the star doesn't
else if cameraStyle == 'viewports' | appear... sorry guys)
p p
| Recommended views are displayed with a | It contains <em>recommended views</em> : 3D objects
| transparent red rectangle and some lines. | here to guide you through this coin search.
| Basically, it represents the position of a camera
| (the point at the extramities of the lines
| represents the optical center, and the red
| rectangle represents the image plane).
else if cameraStyle == 'reverse' if cameraStyle == 'arrows'
p
| Recommended views are displayed with a
| transparent blue arrow. They disappear when you
| come closer to them, and shows the motion between
| your current position and the recommendation.
else if cameraStyle == 'viewports'
p
| Recommended views are displayed with a
| transparent red rectangle and some lines.
| Basically, it represents the position of a camera
| (the point at the extramities of the lines
| represents the optical center, and the red
| rectangle represents the image plane).
else if cameraStyle == 'reverse'
p
| Recommended views are displayed with a strange
| blue object. Basically, the curve at the
| begining of this weird object shows the motion
| that starts from where you are and leads to the
| recommended view, and the extremity is in fact an
| object representing a camera.
p p
| Recommended views are displayed with a strange | You can click on a recommendation to move to the
| blue object. Basically, the curve at the | recommended viewpoint. The recommendation will become
| begining of this weird object shows the motion | more and more transparent as you come closer, and
| that starts from where you are and leads to the | will disappear when you reach it.
| recommended view, and the extremity is in fact an
| object representing a camera.
p p
| You can click on a recommendation to move to the | You may now <a href="#" data-target="#collapseInstructions" data-toggle="collapse" onclick="setTimeout(onWindowResize,500);">hide this panel</a> and start playing !
| recommended viewpoint. The recommendation will become
| more and more transparent as you come closer, and
| will disappear when you reach it.
p
| You may now <a href="#" data-target="#collapseInstructions" data-toggle="collapse" onclick="setTimeout(onWindowResize,500);">hide this panel</a> and start playing !
button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen
button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera