Difference between revisions of "Clock"

From Valve Developer Community
Jump to: navigation, search
 
(15 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{wip}}
+
{{back | Portal Level Creation}}
This tutorial will show you how to make the beggining-clock as shown in the image to the right.
 
=Adding the model=
 
# By using the ''Entity tool'', click somewhere in the 3D view
 
# Make it '''prop_static'''
 
# Open the properties and click "'''Select Model:'''"
 
# Select '''models/props/clock.mdl'''
 
  
=Adding the timer brushes=
+
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.
Minutes, seconds, centiseconds and milliseconds are '''''func_brushes'''''
+
__NOTOC__
{{Tip|Use grid number 2}}
 
This is the order of making the brushes:
 
  
====1. Minutes====
+
== Creation ==
#In the top view make a 10x10 brush with the texture '''''signage/clock/clock_minutes'''''
+
=== Step 1 ===
#Press Ctrl+T and make it '''func_brush'''
+
[[File:Clock model.png|200px|thumb|right|The clock model]]
#Name it: "Minutes"
+
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>.
 +
{{clr}}
  
====2. Dot====
+
=== Step 2 ===
#Make a 2x10 brush NEXT TO the brush we made before.
+
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>.
(Optional) 2. Press Ctrl+T to make it func_detail
 
  
====3. Seconds====
+
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.
#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"
 
  
 +
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>.
  
After all the work, it should like in the photo in the right
+
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>.
  
{{Tip|It's recommended to select the texture of teh brushes and press "Fit" for a better quality.}}
+
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>.
=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:
+
Next create another <code>2w*2l*10h</code> <code>func_detail</code> brush with the front textured with <code>signage/clock/clock_dots</code>.
#Two '''"math_counter"'s'''
+
 
#Four '''"logic_timer"'s'''
+
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>.
#Two '''"material_modify_control"'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>.
 +
 
 +
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>.
 +
 
 +
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>.
 +
 
 +
Finally, create another <code>material_modify_control</code> entity and set its ''Name'' to <code>mmc_clock_milliseconds</code>, set its ''Parent'' to <code>brush_clock_milliseconds</code>, set its ''Material to modify.'' to <code>signage/clock/clock_milliseconds</code>, and set its ''Material variable to modify'' to <code>$frame</code>.
 +
 
 +
 
 +
<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
 +
|-
 +
| [[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
 +
|-
 +
| [[Image:Io12.png]] || OnTimer || counter_clock || Add || 1 || 0.00 || No
 +
|-
 +
| [[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
 +
|-
 +
| [[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]]

Latest revision as of 01:50, 13 June 2019

Portal Level Creation

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_milliseconds, set its Parent to brush_clock_milliseconds, set its Material to modify. to signage/clock/clock_milliseconds, 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.