Clock: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (Spelling)
(Rewrite)
Line 1: Line 1:
This tutorial will show how to create the '''clock''' seen in the very first test chamber of [[Portal]]. The clock can be used to indicate when a test element is activated after a delay, and is used in Portal to show how much time is left until the portals in the very first room open.
__NOTOC__


This tutorial will show you how to make the beggining-clock as shown in the image to the right.
== Creation ==
=Adding the model=
=== Step 1 ===
# By using the ''Entity tool'', click somewhere in the 3D view
[[File:Clock model.png|200px|thumb|right|The clock model]]
# Make it '''prop_static'''
Create a <code>[[prop_dynamic]]</code> entity. Set its ''World Model'' to <code>models/props/clock.mdl</code>, its ''Pitch Yaw Roll'' to <code>-90 180 0</code> and set ''Disable Shadows'' to <code>yes</code>.
# Open the properties and click "'''Select Model:'''"
{{clr}}
# Select '''models/props/clock.mdl'''


=Adding the timer brushes=
=== Step 2 ===
Minutes, seconds, centiseconds and milliseconds are '''''func_brushes'''''
Create a <code>2w*10l*10h</code> brush aligned to the left within the clock model. Texture the front side with <code>signage/clock/clock_minutes</code> and press "Fit" to fit the texture on the brush. Tie this brush to a <code>[[func_brush]]</code> entity and set its ''Name'' to <code>brush_clock_minutes</code>.
{{Tip|Use grid number 2}}
This is the order of making the brushes:


====1. Minutes====
Next create a <code>2w*2l*10h</code> brush right next to the previous brush. Texture the front with <code>signage/clock/clock_dots</code> and fit the texture to the brush. Tie this brush to a <code>[[func_detail]]</code> entity.
#In the top view make a 10x10 brush with the texture '''''signage/clock/clock_minutes'''''
#Press Ctrl+T and make it '''func_brush'''
#Name it: "Minutes"


====2. Dot====
After that, create another <code>2w*10l*10h</code> brush next to the previous brush and texture the front with <code>signage/clock/clock_seconds</code> and fit the texture to the brush. Tie this brush to a <code>func_brush</code> entity and set its ''Name'' to <code>brush_clock_seconds</code>.
#Make a 2x10 brush NEXT TO the brush we made before.
(Optional) 2. Press Ctrl+T to make it func_detail


====3. Seconds====
Create another <code>2w*2l*10h</code> brush with the front textured with <code>signage/clock/clock_dots</code> and tie it to a <code>func_detail</code>.
#Same thing as "Minutes" but with a different texture. Use '''''signage/clock/clock_seconds'''''
#Name it: "Seconds"
====4. Dot====
[[File:clock.png|thumb|350px|How it must look after adding the brushes.]]
#NEXT TO "Seconds" make a 2x10 brush just like before.
====5. Centiseconds====
#Same thing as "Seconds" and "Minutes" but with different texture. Use '''''signage/clock/clock_centiseconds'''''
#Name it: "Centiseconds"
====6. Dot====
#2x10 brush. Same as the other Dots
{{Tip|Copy paste is helpful here!}} {{clr}}
====7. Milliseconds====
# 10x10 brush, texture: '''''signage/clock/clock_milliseconds''''', just like the other ones
# Name it: "Milliseconds"


Now create another <code>2w*10l*10h</code> brush and texture the front with <code>signage/clock/clock_centiseconds</code>. Tie it to a <code>func_brush</code> and set its ''Name'' to <code>brush_clock_centiseconds</code>.


After all the work, it should like in the photo in the right
Next create another <code>2w*2l*10h</code> <code>func_detail</code> brush with the front textured with <code>signage/clock/clock_dots</code>.


{{Tip|It's recommended to select the texture of the brushes and press "Fit" for a better quality.}}
Finally, create another <code>2w*10l*10h</code> with the front textured with <code>signage/clock/clock_milliseconds</code>. Tie it to a <code>func_brush</code> and set its ''Name'' to <code>brush_clock_milliseconds</code>.
=Logic entities: The hard part!=
Now that we made the brushes, we need to work with the entities that will make the timer count down!


You will need these entities:
*Two '''"material_modify_control"'s'''
*Four '''"logic_timer"'s'''
*Two '''"math_counter"'s'''
*Two '''"env_texturetoggle"'s'''


<gallery>
File:Clock_brush_minutes.png|The minutes display brush
File:Clock_brush_dots1.png|The first "dots" display brush
File:Clock_brush_seconds.png|The seconds display brush
File:Clock_brush_dots2.png|The second "dots" display brush
File:Clock_brush_centiseconds.png|The centiseconds display brush
File:Clock_brush_dots3.png|The third "dots" display brush
File:Clock_brush_milliseconds.png|The milliseconds display brush
</gallery>


=== Step 3 ===
Create an <code>[[env_texturetoggle]]</code> entity. Set its ''Name'' to <code>texturetoggle_clock_minutes</code> and set its ''Target Brush(es)'' to <code>brush_clock_minutes</code>.


:::::::::'''''== Properties =='''''
Next create another <code>env_texturetoggle</code> and set its ''Name'' to <code>texturetoggle_clock_seconds</code> and set its ''Target Brush(es)'' to <code>brush_clock_seconds</code>.


:::::::material_modify_control's
After that, create a <code>[[material_modify_control]]</code> entity. Set its ''Name'' to <code>mmc_clock_centiseconds</code>, set its ''Parent'' to <code>brush_clock_centiseconds</code>, set its ''Material to modify.'' to <code>signage/clock/clock_centiseconds</code>, and set its ''Material variable to modify.'' to <code>$frame</code>.


{| class=standard-table
Finally, create another <code>material_modify_control</code> entity and set its ''Name'' to <code>mmc_clock_centiseconds</code>, set its ''Parent'' to <code>brush_clock_centiseconds</code>, set its ''Material to modify.'' to <code>signage/clock/clock_centiseconds</code>, and set its ''Material variable to modify.'' to <code>$frame</code>.
|| FIRST material_modify_control || SECOND material_modify_control
 
 
<gallery>
File:Clock_texturetoggle_minutes.png|The <code>texturetoggle_clock_minutes</code> entity
File:Clock_texturetoggle_seconds.png|The <code>texturetoggle_clock_seconds</code> entity
File:Clock_mmc_centiseconds.png|The <code>mmc_clock_centiseconds</code> entity
File:Clock_mmc_milliseconds.png|The <code>mmc_clock_milliseconds</code> entity
</gallery>
 
=== Step 4 ===
Create a <code>[[logic_timer]]</code> entity. Set its ''Name'' to <code>timer_clock_minutes</code>, set ''Start Disabled'' to <code>Yes</code> and set its ''Refire Interval'' to <code>1</code>. Next, give it the following outputs:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnTimer || texturetoggle_clock_minutes || IncrementTextureIndex || &nbsp; || 0.00 || No
|-
|-
| Name: || Modify_centiseconds || Modify_milliseconds
| [[Image:Io11.png]] || OnTimer || timer_clock_minutes || Disable || &nbsp; || 0.10 || No
|}
 
 
Next, create another <code>logic_timer</code> entity and set its ''Name'' to <code>timer_clock_seconds</code>, set ''Start Disabled'' to <code>Yes</code>, and set its ''Refire Interval'' to <code>1</code>. Add the following outputs to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnTimer || texturetoggle_clock_seconds || IncrementTextureIndex || &nbsp; || 0.00 || No
|-
|-
| Parent: || Centiseconds || Milliseconds
| [[Image:Io12.png]] || OnTimer || counter_clock || Add || 1 || 0.00 || No
|-
|-
| Material to modify: || signage/clock/clock_centiseconds || signage/clock/clock_milliseconds
| [[Image:Io12.png]] || OnTimer || counter_clock_2 || Add || 1 || 0.00 || No
|}
 
 
After that, create another <code>logic_timer</code> entity. Set its ''Name'' to <code>timer_clock_centiseconds</code>, set ''Start Disabled'' to <code>Yes</code>, set its ''Refire Interval'' to <code>1</code>, and add the following output to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnTimer || mmc_clock_centiseconds || StartFloatLerp || 0 59 1 0 || 0.00 || No
|}
 
 
Finally, create another <code>logic_timer</code> entity and set its ''Name'' to <code>timer_clock_milliseconds</code>, set ''Start Disabled'' to <code>Yes</code>, and set its ''Refire Interval'' to <code>.1</code>. Add the following output to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnTimer || mmc_clock_milliseconds || StartFloatLerp || 0 9 .1 1 || 0.00 || No
|}
 
 
<gallery>
File:Clock_timer_minutes.png|The <code>timer_clock_minutes</code> entity
File:Clock_timer_seconds.png|The <code>timer_clock_seconds</code> entity
File:Clock_timer_centiseconds.png|The <code>timer_clock_centiseconds</code> entity
File:Clock_timer_milliseconds.png|The <code>timer_clock_milliseconds</code> entity
</gallery>
 
=== Step 5 ===
[[File:Clock counter.png|200px|thumb|right|The <code>counter_clock</code> entity]]
Create a <code>[[math_counter]]</code> entity. Set its ''Name'' to <code>counter_clock</code>, set its ''Maximum Legal Value'' to <code>60</code>, and add the following outputs:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnHitMax || timer_clock_seconds || Disable || &nbsp; || 0.00 || No
|-
| [[Image:Io11.png]] || OnHitMax || texturetoggle_clock_seconds || SetTextureIndex || 59 || 0.00 || No
|-
|-
| Material Variable to modify: || $frame || $frame
| [[Image:Io12.png]] || OnHitMax || timer_ticktock1 || Disable || &nbsp; || 0.00 || No
|}
|}
{{clr}}
[[File:Clock counter 2.png|200px|thumb|right|The <code>counter_clock_2</code> entity]]
Next, create another <code>math_counter</code> and set its ''Name'' to <code>counter_clock_2</code> and set its ''Maximum Legal Value'' to <code>59</code>. Now add the following outputs to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnHitMax || timer_clock_centiseconds || Disable || &nbsp; || 0.00 || No
|-
| [[Image:Io11.png]] || OnHitMax || timer_clock_milliseconds || Disable || &nbsp; || 1.00 || No
|}
{{clr}}
=== Step 6 ===
[[File:Clock sound ticktock1.png|200px|thumb|right|The <code>sound_ticktock1</code> entity]]
Create a <code>[[ambient_generic]]</code> entity. Set its ''Name'' to <code>sound_ticktock1</code>, set its ''Sound Name'' to <code>Portal.room1_TickTock</code>, set its ''Volume'' to <code>5</code> and set its ''Max Audible Distance'' to <code>441</code>.
{{clr}}
[[File:Clock timer ticktock1.png|200px|thumb|right|The <code>timer_ticktock1</code> entity]]
Next, create a <code>logic_timer</code> entity, set its ''Name'' to <code>timer_ticktock1</code>, set ''Start Disabled'' to <code>Yes</code>, set its ''Refire Interval'' to <code>1</code> and add the following output to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnTimer || sound_ticktock1 || PlaySound || &nbsp; || 0.00 || No
|}
{{clr}}
=== Step 7 ===
[[File:Clock logic auto.png|200px|thumb|right|The <code>logic_auto</code> entity]]
Create a <code>[[logic_auto]]</code> entity and add the following outputs to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnMapSpawn || mmc_clock_milliseconds || SetMaterialVar || 9 || 0.00 || No
|-
| [[Image:Io11.png]] || OnMapSpawn || mmc_clock_centiseconds || SetMaterialVar || 59 || 0.00 || No
|-
| [[Image:Io11.png]] || OnMapSpawn || texturetoggle_clock_seconds || SetTextureIndex || 59 || 0.00 || No
|}
{{clr}}
=== Step 8 ===
[[File:Clock relay.png|200px|thumb|right|The <code>relay_start_clock</code> entity]]
Create a <code>[[logic_relay]]</code> and set its ''Name'' to <code>relay_start_clock</code>. Add the following outputs to it:
{| {{OutputsTable}}
| [[Image:Io11.png]] || OnTrigger || timer_clock_minutes || Enable || &nbsp; || 0.00 || No
|-
| [[Image:Io11.png]] || OnTrigger || timer_clock_seconds || Enable || &nbsp; || 0.00 || No
|-
| [[Image:Io11.png]] || OnTrigger || timer_clock_centiseconds || Enable || &nbsp; || 0.00 || No
|-
| [[Image:Io11.png]] || OnTrigger || timer_ticktock1 || Enable || &nbsp; || 0.00 || No
|-
| [[Image:Io11.png]] || OnTrigger || timer_clock_milliseconds || Enable || &nbsp; || 0.90 || No
|}
{{clr}}
The clock is now finished and ready to be implemented in a map.
== Implementation ==
=== Step 1 ===
Position the clock on the wall where it should be in the map.
=== Step 2 ===
Send the ''Trigger'' input to the <code>relay_start_clock</code> relay when the countdown should begin.
[[Category:Level Design Tutorials]]
[[Category:Portal]]

Revision as of 09:44, 8 August 2018

This tutorial will show how to create the clock seen in the very first test chamber of Portal. The clock can be used to indicate when a test element is activated after a delay, and is used in Portal to show how much time is left until the portals in the very first room open.


Creation

Step 1

The clock model

Create a prop_dynamic entity. Set its World Model to models/props/clock.mdl, its Pitch Yaw Roll to -90 180 0 and set Disable Shadows to yes.

Step 2

Create a 2w*10l*10h brush aligned to the left within the clock model. Texture the front side with signage/clock/clock_minutes and press "Fit" to fit the texture on the brush. Tie this brush to a func_brush entity and set its Name to brush_clock_minutes.

Next create a 2w*2l*10h brush right next to the previous brush. Texture the front with signage/clock/clock_dots and fit the texture to the brush. Tie this brush to a func_detail entity.

After that, create another 2w*10l*10h brush next to the previous brush and texture the front with signage/clock/clock_seconds and fit the texture to the brush. Tie this brush to a func_brush entity and set its Name to brush_clock_seconds.

Create another 2w*2l*10h brush with the front textured with signage/clock/clock_dots and tie it to a func_detail.

Now create another 2w*10l*10h brush and texture the front with signage/clock/clock_centiseconds. Tie it to a func_brush and set its Name to brush_clock_centiseconds.

Next create another 2w*2l*10h func_detail brush with the front textured with signage/clock/clock_dots.

Finally, create another 2w*10l*10h with the front textured with signage/clock/clock_milliseconds. Tie it to a func_brush and set its Name to brush_clock_milliseconds.


Step 3

Create an env_texturetoggle entity. Set its Name to texturetoggle_clock_minutes and set its Target Brush(es) to brush_clock_minutes.

Next create another env_texturetoggle and set its Name to texturetoggle_clock_seconds and set its Target Brush(es) to brush_clock_seconds.

After that, create a material_modify_control entity. Set its Name to mmc_clock_centiseconds, set its Parent to brush_clock_centiseconds, set its Material to modify. to signage/clock/clock_centiseconds, and set its Material variable to modify. to $frame.

Finally, create another material_modify_control entity and set its Name to mmc_clock_centiseconds, set its Parent to brush_clock_centiseconds, set its Material to modify. to signage/clock/clock_centiseconds, and set its Material variable to modify. to $frame.


Step 4

Create a logic_timer entity. Set its Name to timer_clock_minutes, set Start Disabled to Yes and set its Refire Interval to 1. Next, give it the following outputs:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnTimer texturetoggle_clock_minutes IncrementTextureIndex   0.00 No
Io11.png OnTimer timer_clock_minutes Disable   0.10 No


Next, create another logic_timer entity and set its Name to timer_clock_seconds, set Start Disabled to Yes, and set its Refire Interval to 1. Add the following outputs to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnTimer texturetoggle_clock_seconds IncrementTextureIndex   0.00 No
Io12.png OnTimer counter_clock Add 1 0.00 No
Io12.png OnTimer counter_clock_2 Add 1 0.00 No


After that, create another logic_timer entity. Set its Name to timer_clock_centiseconds, set Start Disabled to Yes, set its Refire Interval to 1, and add the following output to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnTimer mmc_clock_centiseconds StartFloatLerp 0 59 1 0 0.00 No


Finally, create another logic_timer entity and set its Name to timer_clock_milliseconds, set Start Disabled to Yes, and set its Refire Interval to .1. Add the following output to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnTimer mmc_clock_milliseconds StartFloatLerp 0 9 .1 1 0.00 No


Step 5

The counter_clock entity

Create a math_counter entity. Set its Name to counter_clock, set its Maximum Legal Value to 60, and add the following outputs:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnHitMax timer_clock_seconds Disable   0.00 No
Io11.png OnHitMax texturetoggle_clock_seconds SetTextureIndex 59 0.00 No
Io12.png OnHitMax timer_ticktock1 Disable   0.00 No
The counter_clock_2 entity

Next, create another math_counter and set its Name to counter_clock_2 and set its Maximum Legal Value to 59. Now add the following outputs to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnHitMax timer_clock_centiseconds Disable   0.00 No
Io11.png OnHitMax timer_clock_milliseconds Disable   1.00 No

Step 6

The sound_ticktock1 entity

Create a ambient_generic entity. Set its Name to sound_ticktock1, set its Sound Name to Portal.room1_TickTock, set its Volume to 5 and set its Max Audible Distance to 441.

The timer_ticktock1 entity

Next, create a logic_timer entity, set its Name to timer_ticktock1, set Start Disabled to Yes, set its Refire Interval to 1 and add the following output to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnTimer sound_ticktock1 PlaySound   0.00 No

Step 7

The logic_auto entity

Create a logic_auto entity and add the following outputs to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnMapSpawn mmc_clock_milliseconds SetMaterialVar 9 0.00 No
Io11.png OnMapSpawn mmc_clock_centiseconds SetMaterialVar 59 0.00 No
Io11.png OnMapSpawn texturetoggle_clock_seconds SetTextureIndex 59 0.00 No

Step 8

The relay_start_clock entity

Create a logic_relay and set its Name to relay_start_clock. Add the following outputs to it:

  My Output Target Entity Target Input Parameter Delay Only Once
Io11.png OnTrigger timer_clock_minutes Enable   0.00 No
Io11.png OnTrigger timer_clock_seconds Enable   0.00 No
Io11.png OnTrigger timer_clock_centiseconds Enable   0.00 No
Io11.png OnTrigger timer_ticktock1 Enable   0.00 No
Io11.png OnTrigger timer_clock_milliseconds Enable   0.90 No

The clock is now finished and ready to be implemented in a map.

Implementation

Step 1

Position the clock on the wall where it should be in the map.

Step 2

Send the Trigger input to the relay_start_clock relay when the countdown should begin.