tag:blogger.com,1999:blog-53964224498259388962024-02-07T12:27:48.303-08:00Base Coding Scripts Library Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.comBlogger25125tag:blogger.com,1999:blog-5396422449825938896.post-35942502000941657822019-08-09T03:38:00.001-07:002019-08-13T02:59:10.444-07:00C-Sharp Programming - Message Box<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-KjxcXAyj8-SvinyofwzDsq2-ElIGlafi49r7zRXyLyMD2yHb8i6ZpiXFBt1RoWNW9u_AqExblQOnOzKzATc0Pd-y7n6-TeewUFCPDYRh3jV3DlaBFeLTpZreA7tzrY6XgF9DY1MnPyux/s1600/csharp-programming.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="422" data-original-width="750" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-KjxcXAyj8-SvinyofwzDsq2-ElIGlafi49r7zRXyLyMD2yHb8i6ZpiXFBt1RoWNW9u_AqExblQOnOzKzATc0Pd-y7n6-TeewUFCPDYRh3jV3DlaBFeLTpZreA7tzrY6XgF9DY1MnPyux/s640/csharp-programming.jpg" width="640" /></a></div>
<br />
<b>C-Sharp Programming - </b><span data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="background-color: white; color: #212121; font-family: "open sans" , sans-serif; font-size: 16px;">MessageBox control in Windows Forms is used to display a message with the given text and action buttons. You can also use MessageBox control to add additional options such as a caption, an icon, or help buttons. In this article, you'll learn how to display a MessageBox in a WinForms app using C# and .NET. You will also learn how to use the MessageBox class dynamically in code samples. </span><br />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<br style="box-sizing: border-box;" />
<strong style="box-sizing: border-box;">Get Started</strong>Create a Windows Forms application using Visual Studio.<br />
<br style="box-sizing: border-box;" />
MessageBox class has an overloaded static Show method that is used to display a message.<br />
<br style="box-sizing: border-box;" />
<h2 data-darkreader-inline-color="" style="box-sizing: border-box; color: inherit; font-family: Roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
Simple MessageBox</h2>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<strong style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></strong></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
The simplest form of a MessageBox is a dialog with a text and OK button. When you click OK button, the box disappears.<br />
<br style="box-sizing: border-box;" />
The following code snippet creates a simple Message Box.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">string message = </span><span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Simple MessageBox"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBox.Show(message); </span></li>
</ol>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<h2 data-darkreader-inline-color="" style="box-sizing: border-box; color: inherit; font-family: Roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
MessageBox with Title</h2>
<strong style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></strong>The following code snippet creates a simple MessageBox with a title.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">string message = </span><span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Simple MessageBox"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">string title = <span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Title"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBox.Show(message, title); </span></li>
</ol>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<div style="box-sizing: border-box; text-align: center;">
<img alt="MessageBox with Title" border="0" class="" data-src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg2.jpg" height="154" src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg2.jpg" style="box-sizing: border-box; max-width: 100%;" width="170" /></div>
</div>
<h2 data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
MessageBox with Buttons</h2>
<br data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;" />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
A MessageBox can have different button combinations such as YesNo and OKCancel. The MessageBoxButtons enumeration represents the buttons to be displayed on a MessageBox and has following values.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">OK</li>
<li style="box-sizing: border-box;">OKCancel</li>
<li style="box-sizing: border-box;">AbortRetryIgnore</li>
<li style="box-sizing: border-box;">YesNoCancel</li>
<li style="box-sizing: border-box;">YesNo</li>
<li style="box-sizing: border-box;">RetryCancel</li>
</ul>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
The following code snippet creates a MessageBox with a title and Yes and No buttons. This is a typical MessageBox you may call when you want to close an application. If the Yes button is clicked, the application will be closed. The Show method returns a DialogResult enumeration.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">string message = </span><span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Do you want to close this window?"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">string title = <span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Close Window"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxButtons buttons = MessageBoxButtons.YesNo; </span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">DialogResult result = MessageBox.Show(message, title, buttons); </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">if</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> (result == DialogResult.Yes) { </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">this</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">.Close(); </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} <span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">else</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> { </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="comment" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; margin: 0px; padding: 0px;">// Do something</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
</ol>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<div align="center" data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<img alt="MessageBox with Buttons" border="0" class="" data-src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg3.jpg" height="154" src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg3.jpg" style="box-sizing: border-box; max-width: 100%;" width="251" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<strong style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></strong>
<br />
<h2 data-darkreader-inline-color="" style="box-sizing: border-box; color: inherit; font-family: Roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
<strong style="box-sizing: border-box;"></strong>MessageBox with Icon</h2>
<strong style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></strong>A MessageBox can display an icon on the dialog. A MessageBoxIcons enumeration represents an icon to be displayed on a MessageBox and has following values.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<div style="box-sizing: border-box;">
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">None</li>
<li style="box-sizing: border-box;">Hand</li>
<li style="box-sizing: border-box;">Question</li>
<li style="box-sizing: border-box;">Exclamation</li>
<li style="box-sizing: border-box;">Asterisk</li>
<li style="box-sizing: border-box;">Stop</li>
<li style="box-sizing: border-box;">Error</li>
<li style="box-sizing: border-box;">Warning</li>
<li style="box-sizing: border-box;">Information</li>
</ul>
</div>
<div style="box-sizing: border-box;">
The following code snippet creates a MessageBox with a title, buttons, and an icon.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">string message = </span><span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Do you want to abort this operation?"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">string title = <span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Close Window"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxButtons buttons = MessageBoxButtons.AbortRetryIgnore; </span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">DialogResult result = MessageBox.Show(message, title, buttons, MessageBoxIcon.Warning); </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">if</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> (result == DialogResult.Abort) { </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">this</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">.Close(); </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">elseif(result == DialogResult.Retry) { </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="comment" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; margin: 0px; padding: 0px;">// Do nothing</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">else</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> { </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="comment" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; margin: 0px; padding: 0px;">// Do something</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
</ol>
</div>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<div align="center" data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<img alt="MessageBox with Icon" border="0" class="" data-src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg4.jpg" height="171" src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg4.jpg" style="box-sizing: border-box; max-width: 100%;" width="349" /></div>
<br data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;" />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<h2 data-darkreader-inline-color="" style="box-sizing: border-box; color: inherit; font-family: Roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
MessageBox with Default Button</h2>
<strong style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></strong>We can also set the default button on a MessageBox. By default, the first button is the default button. The MessageBoxDefaultButton enumeration is used for this purpose and it has the following three values.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<div style="box-sizing: border-box;">
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Button1</li>
<li style="box-sizing: border-box;">Button2</li>
<li style="box-sizing: border-box;">Button3</li>
</ul>
</div>
<div style="box-sizing: border-box;">
The following code snippet creates a MessageBox with a title, buttons, and an icon and sets the second button as a default button.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">string message = </span><span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Do you want to abort this operation?"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">string title = <span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"Close Window"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">; </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxButtons buttons = MessageBoxButtons.AbortRetryIgnore; </span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">DialogResult result = MessageBox.Show(message, title, buttons, MessageBoxIcon.Warning, MessageBoxDefaultButton.Button2); </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">if</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> (result == DialogResult.Abort) { </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">this</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">.Close(); </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">elseif(result == DialogResult.Retry) { </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="comment" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; margin: 0px; padding: 0px;">// Do nothing</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">else</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> { </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"> <span class="comment" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; margin: 0px; padding: 0px;">// Do something</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> </span></span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">} </span></li>
</ol>
</div>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<div align="center" data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<img alt="MessageBox with Default Button" border="0" class="" data-src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg5.jpg" height="171" src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg5.jpg" style="box-sizing: border-box; max-width: 100%;" width="349" /></div>
<h2 data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
MessageBox with Message Options</h2>
<br data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;" />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<div style="box-sizing: border-box;">
MessageBoxOptions enumeration represents various options and has following values.</div>
<div style="box-sizing: border-box;">
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">ServiceNotification</li>
<li style="box-sizing: border-box;">DefaultDesktopOnly</li>
<li style="box-sizing: border-box;">RightAlign</li>
<li style="box-sizing: border-box;">RtlReading</li>
</ul>
</div>
<div style="box-sizing: border-box;">
The following code snippet creates a MessageBox with various options.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">DialogResult result = MessageBox.Show(message, title, buttons, </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxIcon.Warning, MessageBoxDefaultButton.Button2, </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxOptions.RightAlign|MessageBoxOptions.RtlReading); </span></li>
</ol>
</div>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
<strong style="box-sizing: border-box;"></strong></div>
<div align="center" data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<strong style="box-sizing: border-box;"><img alt="MessageBox with Message Options" border="0" class="" data-src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg6.jpg" height="171" src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg6.jpg" style="box-sizing: border-box; max-width: 100%;" width="349" /></strong></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<h2 data-darkreader-inline-color="" style="box-sizing: border-box; color: inherit; font-family: Roboto, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 0px; margin-top: 0px;">
MessageBox with Help Button</h2>
<strong style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></strong>A MessageBox can have an extra button called Help button. This is useful when we need to display a help file. The following code snippet creates a MessageBox with a Help button.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">DialogResult result = MessageBox.Show(message, title, buttons, </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxIcon.Warning, MessageBoxDefaultButton.Button2, </span></li>
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">MessageBoxOptions.RightAlign, <span class="keyword" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-weight: bold; margin: 0px; padding: 0px;">true</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;"> ); </span></span></li>
</ol>
</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px; line-height: 1.5; margin-bottom: 1em; margin-top: 1em;">
</div>
<div align="center" data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<img alt="MessageBox with Help Button" border="0" class="" data-src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg7.jpg" height="171" src="https://www.c-sharpcorner.com/UploadFile/mahesh/understanding-message-box-in-windows-forms-using-C-Sharp/Images/MsgBoxImg7.jpg" style="box-sizing: border-box; max-width: 100%;" width="349" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-color: #f7f1e4; background-color: white; box-sizing: border-box; color: #212121; font-family: "open sans", sans-serif; font-size: 16px;">
<div style="box-sizing: border-box;">
We can also specify a help file when the Help button is clicked. The following code snippet references a help file.<br />
<div class="dp-highlighter" data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #1a170a; background-color: #e7e5dc; box-sizing: border-box; font-family: consolas, "courier new", courier, mono, serif; margin: 18px 0px; overflow: auto; padding-top: 1px; width: 665.922px;">
<div class="bar" style="box-sizing: border-box; padding-left: 45px;">
</div>
<ol class="dp-c" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" start="1" style="--darkreader-inline-bgcolor: #040607; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #dcd5c5; background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; margin: 0px 0px 1px 45px; padding: 0px;">
<li class="alt" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="border-bottom: none; border-image: initial; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; color: inherit; line-height: 18px; list-style-image: initial; list-style-position: outside !important; list-style-type: decimal-leading-zero; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">DialogResult result = MessageBox.Show(message, title, </span></span></li>
<li class="" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #060809; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: #138e0f; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; background-color: #f8f8f8; border-bottom: none; border-left: 3px solid rgb(108, 226, 108); border-right: none; border-top: none; box-sizing: border-box; line-height: 18px; list-style-position: outside; list-style-type: decimal-leading-zero; margin: 0px; padding: 0px 3px 0px 10px;"><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: black; margin: 0px; padding: 0px;">buttons, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1, 0, <span class="string" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; margin: 0px; padding: 0px;">"helpfile.chm"</span><span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="background-color: inherit; border: none; box-sizing: border-box; margin: 0px; padding: 0px;">); </span></span></li>
</ol>
</div>
</div>
</div>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-84889223195365520772019-08-09T03:18:00.003-07:002019-08-13T02:59:18.839-07:00C-Sharp Programming - Hello World<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9vTvp_4JJbuzYPPKFRaseSAcidddCwMB1Z1w8fsmTxOyarYmD6dUEryS6lRjbswo5pvddVVisl-ytLJ4AywvcnBM6GISLn700CGcEAWovKn3mkVwRWCvw_Xi4Rtagv-gabmCdOlLIHS0/s1600/csharp-programming.jpg" imageanchor="1"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9vTvp_4JJbuzYPPKFRaseSAcidddCwMB1Z1w8fsmTxOyarYmD6dUEryS6lRjbswo5pvddVVisl-ytLJ4AywvcnBM6GISLn700CGcEAWovKn3mkVwRWCvw_Xi4Rtagv-gabmCdOlLIHS0/s640/csharp-programming.jpg" width="640" /></a><br />
<br />
<b>C-Sharp Programming -</b> C# (pronounced C sharp) is a general-purpose, multi-paradigm programming language encompassing strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.<br />
<br />
It was developed around 2000 by Microsoft within its .NET initiative and later approved as a standard by Ecma (ECMA-334) and ISO (ISO/IEC 23270:2018). C# is one of the programming languages designed for the Common Language Infrastructure.<br />
<br />
C# was designed by Anders Hejlsberg, and its development team is currently led by Mads Torgersen. The most recent version is C# 7.3, which was released in 2018 alongside Visual Studio 2017 version 15.7.2.<br />
<h2 class="" data-darkreader-inline-bgcolor="" id="to-create-and-run-a-console-application" style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", SegoeUI, "Segoe WP", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif; font-size: 1.75rem; line-height: 1.3; margin: 32px 0px 12px; padding: 0px;">
To create and run a console application<a aria-labelledby="to-create-and-run-a-console-application" class="docon docon-link heading-anchor" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-outline="" href="https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/inside-a-program/hello-world-your-first-program#to-create-and-run-a-console-application" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-outline: initial; background-color: transparent; border: 0px; box-sizing: inherit; clip: rect(1px, 1px, 1px, 1px); cursor: pointer; direction: ltr; display: inline-block; font-family: docons; font-size: 0.8em; font-weight: 400; height: 1px; line-height: 16px; margin: -1px; opacity: 0; outline: 0px; overflow-wrap: normal; overflow: hidden; padding: 0px; position: absolute; speak: none; text-align: center; transition: all 0.1s linear 0s; vertical-align: middle; width: 1px;"></a></h2>
<ol data-darkreader-inline-bgcolor="" style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", SegoeUI, "Segoe WP", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif; font-size: 16px; margin: 16px 0px 16px 38px; padding: 0px;">
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
Start Visual Studio.</div>
</li>
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
On the menu bar, choose <span style="box-sizing: inherit; font-weight: bolder;">File</span>, <span style="box-sizing: inherit; font-weight: bolder;">New</span>, <span style="box-sizing: inherit; font-weight: bolder;">Project</span>.</div>
<div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
The <span style="box-sizing: inherit; font-weight: bolder;">New Project</span> dialog box opens.</div>
</li>
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
Expand <span style="box-sizing: inherit; font-weight: bolder;">Installed</span>, expand <span style="box-sizing: inherit; font-weight: bolder;">Templates</span>, expand <span style="box-sizing: inherit; font-weight: bolder;">Visual C#</span>, and then choose <span style="box-sizing: inherit; font-weight: bolder;">Console Application</span>.</div>
</li>
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
In the <span style="box-sizing: inherit; font-weight: bolder;">Name</span> box, specify a name for your project, and then choose the <span style="box-sizing: inherit; font-weight: bolder;">OK</span> button.</div>
<div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
The new project appears in <span style="box-sizing: inherit; font-weight: bolder;">Solution Explorer</span>.</div>
</li>
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
If Program.cs isn't open in the <span style="box-sizing: inherit; font-weight: bolder;">Code Editor</span>, open the shortcut menu for <span style="box-sizing: inherit; font-weight: bolder;">Program.cs</span> in <span style="box-sizing: inherit; font-weight: bolder;">Solution Explorer</span>, and then choose <span style="box-sizing: inherit; font-weight: bolder;">View Code</span>.</div>
</li>
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
Replace the contents of Program.cs with the following code.</div>
<pre class="has-inner-focus" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; border: 1px solid; box-sizing: inherit; font-size: 0.875rem; line-height: 19px; overflow-wrap: normal; overflow: auto; padding: 1rem; word-break: normal; word-spacing: normal;" tabindex="0"><code class="lang-csharp" data-author-content="// A Hello World! program in C#.
using System;
namespace HelloWorld
{
class Hello
{
static void Main()
{
Console.WriteLine("Hello World!");
// Keep the console window open in debug mode.
Console.WriteLine("Press any key to exit.");
Console.ReadKey();
}
}
}
" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" name="csProgGuide#21" style="--darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; border: 0px; box-sizing: inherit; direction: ltr; display: block; font-size: 1em; line-height: 19px; padding: 0px; position: relative;"><span class="hljs-comment" data-darkreader-inline-color="" style="box-sizing: inherit; color: green;">// A Hello World! program in C#.</span>
<span class="hljs-keyword" data-darkreader-inline-color="" style="box-sizing: inherit; color: #0101fd;">using</span> System;
<span class="hljs-keyword" data-darkreader-inline-color="" style="box-sizing: inherit; color: #0101fd;">namespace</span> <span class="hljs-title" data-darkreader-inline-color="" style="box-sizing: inherit; color: #007d9a;">HelloWorld</span>
{
<span class="hljs-keyword" data-darkreader-inline-color="" style="box-sizing: inherit; color: #0101fd;">class</span> <span class="hljs-title" data-darkreader-inline-color="" style="box-sizing: inherit; color: #007d9a;">Hello</span>
{
<span class="hljs-function" style="box-sizing: inherit;"><span class="hljs-keyword" data-darkreader-inline-color="" style="box-sizing: inherit; color: #0101fd;">static</span> <span class="hljs-keyword" data-darkreader-inline-color="" style="box-sizing: inherit; color: #0101fd;">void</span> <span class="hljs-title" data-darkreader-inline-color="" style="box-sizing: inherit; color: #007d9a;">Main</span>(<span class="hljs-params" style="box-sizing: inherit;"></span>)
</span>{
Console.WriteLine(<span class="hljs-string" data-darkreader-inline-color="" style="box-sizing: inherit; color: #a31515;">"Hello World!"</span>);
<span class="hljs-comment" data-darkreader-inline-color="" style="box-sizing: inherit; color: green;">// Keep the console window open in debug mode.</span>
Console.WriteLine(<span class="hljs-string" data-darkreader-inline-color="" style="box-sizing: inherit; color: #a31515;">"Press any key to exit."</span>);
Console.ReadKey();
}
}
}
</code></pre>
</li>
<li data-darkreader-inline-outline="" style="box-sizing: inherit; list-style: decimal outside none; margin: 0px; outline: 0px; padding: 0px;"><div class="" style="box-sizing: inherit; margin-top: 1rem; overflow-wrap: break-word; padding: 0px;">
Choose the F5 key to run the project. A Command Prompt window appears that contains the line <code style="background-color: var(--body-background-dark); border-radius: 3px; box-sizing: inherit; direction: ltr; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; overflow-wrap: break-word; padding: 0.1em 0.2em;">Hello World!</code></div>
</li>
</ol>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-51684090478146717792019-07-27T20:53:00.000-07:002019-08-13T02:59:39.012-07:00Kotlin - Environment Setup<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOHw2al-AwK9fWMNAXH5E2mDQpFd0A9Ea8SdjZf665H5qwOcyGufVNNjcmCEgx1XB1xytyGu4InzYQky8ysfexp9-keq3WgcWoa94nFqHSIX7DuILqt0DP33iWeinKQz65vn9s-66-wnf/s1600/Kotlin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1500" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOHw2al-AwK9fWMNAXH5E2mDQpFd0A9Ea8SdjZf665H5qwOcyGufVNNjcmCEgx1XB1xytyGu4InzYQky8ysfexp9-keq3WgcWoa94nFqHSIX7DuILqt0DP33iWeinKQz65vn9s-66-wnf/s640/Kotlin.jpg" width="640" /></a></div>
<br />
Kotlin - <span style="font-family: "verdana" , "geneva" , "tahoma" , "arial" , "helvetica" , sans-serif; font-size: 15px; text-align: justify;">However, if you still want to use Kotlin offline in your local system, then you need to execute the following steps to configure your local workspace.</span><br />
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<span style="box-sizing: border-box; font-weight: 640;">Step 1</span> − Java 8 installation.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Kotlin runs on JVM, hence. it is really necessary to use JDK 8 for your local Kotlin development. Please refer to the official website of <a data-darkreader-inline-color="" data-darkreader-inline-outline="" href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" rel="nofollow" style="--darkreader-inline-color: #ffffee; --darkreader-inline-outline: initial; background-position: right center; background-repeat: no-repeat; box-sizing: border-box; color: #efe8dc; outline: none; padding-bottom: 2px; padding-right: 22px;" target="_blank">oracle</a> to download and install JDK 8 or an above version. You might have to set the environment variable for JAVA such that it can work properly. To verify your installation in Windows operating system, hit “java –version” in the command prompt and as an output it will show you the java version installed in your system.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<span style="box-sizing: border-box; font-weight: 640;">Step 2</span> − IDE installation.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
There are a number of IDE available over the internet. You can use any of your choice. You can find the download link of different IDE in the following table.</div>
<table class="table table-bordered" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; --darkreader-inline-color: #ffffee; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; color: #efe8dc; font-family: verdana, geneva, tahoma, arial, helvetica, sans-serif; font-size: 14px; margin-bottom: 20px; max-width: 100%; text-align: center; width: 604px;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><th data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; background: rgb(10, 12, 13); border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: center; vertical-align: middle;">IDE Name</th><th data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; background: rgb(10, 12, 13); border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: center; vertical-align: middle;">Installation Link</th></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">NetBeans</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;"><a data-darkreader-inline-color="" data-darkreader-inline-outline="" href="https://netbeans.org/downloads/" rel="nofollow" style="--darkreader-inline-color: #ffffee; --darkreader-inline-outline: initial; background-position: right center; background-repeat: no-repeat; box-sizing: border-box; color: #efe8dc; font-weight: bold; outline: none; padding-bottom: 2px; padding-right: 22px;" target="_blank">https://netbeans.org/downloads/</a></td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Eclipse</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;"><a data-darkreader-inline-color="" data-darkreader-inline-outline="" href="https://www.eclipse.org/downloads/" rel="nofollow" style="--darkreader-inline-color: #ffffee; --darkreader-inline-outline: initial; background-position: right center; background-repeat: no-repeat; box-sizing: border-box; color: #efe8dc; font-weight: bold; outline: none; padding-bottom: 2px; padding-right: 22px;" target="_blank">https://www.eclipse.org/downloads/</a></td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: middle;">Intellij</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;"><a data-darkreader-inline-color="" data-darkreader-inline-outline="" href="https://www.jetbrains.com/idea/download/#section%20=%20windows" rel="nofollow" style="--darkreader-inline-color: #ffffee; --darkreader-inline-outline: initial; background-position: right center; background-repeat: no-repeat; box-sizing: border-box; color: #efe8dc; font-weight: bold; outline: none; padding-bottom: 2px; padding-right: 22px;" target="_blank">https://www.jetbrains.com/idea/download/#section = windows</a></td></tr>
</tbody></table>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
It is always recommended to use the recent software version to drag out maximum facility from it.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<span style="box-sizing: border-box; font-weight: 640;">Step 3</span> − Configuring Eclipse.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Open Eclipse and go to “Eclipse Market Place”. You will find the following screen.</div>
<img alt="Eclipse Market Place" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" src="https://www.tutorialspoint.com/kotlin/images/eclipse_market_place.jpg" style="--darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #ffffee; border: 0px; box-sizing: border-box; color: #efe8dc; display: block; font-family: verdana, geneva, tahoma, arial, helvetica, sans-serif; font-size: 14px; margin-left: auto; margin-right: auto; max-width: 100%; padding-bottom: 4px; vertical-align: middle;" /><br />
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Search for Kotlin in the search box and install the same in your local system. It might take some time depending on the internet speed. You may have to restart your Eclipse, once it is successfully installed.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<span style="box-sizing: border-box; font-weight: 640;">Step 4</span> − Kotlin Project.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Once Eclipse is successfully restarted and Kotlin is installed, you will be able to create a Kotlin project on the fly. Go to <span style="box-sizing: border-box; font-weight: 640;">File → New → Others</span> and select “Kotlin project” from the list.</div>
<img alt="Kotlin project" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" src="https://www.tutorialspoint.com/kotlin/images/kotlin_project.jpg" style="--darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #ffffee; border: 0px; box-sizing: border-box; color: #efe8dc; display: block; font-family: verdana, geneva, tahoma, arial, helvetica, sans-serif; font-size: 14px; margin-left: auto; margin-right: auto; max-width: 100%; padding-bottom: 4px; vertical-align: middle;" /><br />
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Once the project setup is done, you can create a Kotlin file under “SRC” folder. Left-click on the “Src” folder and hit “new”. You will get an option for Kotlin file, otherwise you may have to search from the “others”. Once the new file is created, your project directory will be look like the following.</div>
<img alt="Hello" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" src="https://www.tutorialspoint.com/kotlin/images/hello.jpg" style="--darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #ffffee; border: 0px; box-sizing: border-box; color: #efe8dc; display: block; font-family: verdana, geneva, tahoma, arial, helvetica, sans-serif; font-size: 14px; margin-left: auto; margin-right: auto; max-width: 100%; padding-bottom: 4px; vertical-align: middle;" /><br />
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Your development environment is ready now. Go ahead and add the following piece of code in the “Hello.kt” file.</div>
<a class="demo" data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" data-darkreader-inline-outline="" href="http://tpcg.io/g0ZgRc" rel="nofollow" style="--darkreader-inline-bgcolor: #8d0056; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffff; --darkreader-inline-outline: initial; background: rgb(146, 10, 97); border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: white; font-family: "Open Sans", Arial, sans-serif; font-size: 13px; margin: -6px 17px 0px 0px; outline: none !important; padding: 3px 10px; position: absolute; right: 5px; text-decoration-line: none;" target="_blank"><i class="fa-external-link" style="box-sizing: border-box;"></i> Live Demo</a><br />
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="box-sizing: border-box; color: #89ff81;">"Hello, World!"</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Run it as a Kotlin application and see the output in the console as shown in the following screenshot. For better understanding and availability, we will be using our coding ground tool.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: menlo, monaco, consolas, "courier new", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">Hello, World!</pre>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-46459321208722796902019-07-26T20:52:00.000-07:002019-07-26T20:15:47.500-07:00Zetpack Framework - Controller<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt503UafCw3xp9IOniXVDA25uFG8wuaci3UJ_7QLvZKRczcHbUX4fFYuXQ12VGUKA6-Xb_pomU7H9PKk2uoSAcNX-INsF4DGMxAODYfMETBZnfboy4r8bCuqgvI13S_wxd_-IG0jlaFdYg/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="636" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt503UafCw3xp9IOniXVDA25uFG8wuaci3UJ_7QLvZKRczcHbUX4fFYuXQ12VGUKA6-Xb_pomU7H9PKk2uoSAcNX-INsF4DGMxAODYfMETBZnfboy4r8bCuqgvI13S_wxd_-IG0jlaFdYg/s640/ZetpackWall.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
ZetPack is the Unity library to speed up the game development process as fast as a razor blade. Zetpack is an evolution from IMedia9. KIT and Kancil Code for the development of PC and Mobile based games (Android) by prioritizing the application of the MVC concept (Model, View, Controller) adopted from modern programming concepts, especially web applications.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJopKDgNbSPX1fCJfV259Ta-ltGc-yQPyTXcHP47JOCCQCXOwgdmKgLUbiNAYySkb4PO2aGd1nhmLZpMPS9wpTZOuthW8lEhcev8pYEPp_idEYNqVLYq2qYoa9oLmPUtrGRoBvHEvbiUmx/s1600/Zetpack-MCV.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="464" data-original-width="649" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJopKDgNbSPX1fCJfV259Ta-ltGc-yQPyTXcHP47JOCCQCXOwgdmKgLUbiNAYySkb4PO2aGd1nhmLZpMPS9wpTZOuthW8lEhcev8pYEPp_idEYNqVLYq2qYoa9oLmPUtrGRoBvHEvbiUmx/s640/Zetpack-MCV.jpg" width="640" /></a></div>
<br />
Zetpack adopts the MVC concept by mapping all general mechanics in the game and breaking them down into modular classes. The main package that is the basis of the Zetpack Framework is a Variable Model that contains a collection of basic variables that will be input to the package controller to produce interaction with the player and displayed using package View on the User Interface component.<br />
<br />
<hr />
<br />
<b><span style="font-size: x-large;">CONTROLLER</span></b><br />
<br />
<b>Unity Controller (</b><a href="https://drive.google.com/open?id=1rSO0LHN3BJ5ri3OkHVVSKou9pw2ziZY8">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Unity Controller contains 30+ Unity basic scripts that are intended for you lay users who want to understand basic Unity commands in a fast and easy way. The combination of scripts in this package can be used to build a simple game.<br />
<br />
<b>Player Controller (</b><a href="https://drive.google.com/open?id=18BY4PjYzpz4lvVUmNTidm_U4c4zsKN3n">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
The Player Controller consists of 2 main classes, namely PositionController, which functions to interact with the displacement of character positions and Animation Controllers which function to interact with changes in character / animation poses. This package is an evolution of the previous class namely class Mechanim-xxx and Anima-xxx.<br />
<br />
<b>Paint Controller (</b><a href="https://drive.google.com/open?id=1aFgIGwo9gXvY6ZRiRn-dTBeCXNvdxLVQ">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Paint Controller is a class that contains the mechanism of drawing on screen / 3D plane. This package can be modified for making casual painting or tracking letter games.<br />
<br />
<b>Image Controller (</b><a href="https://drive.google.com/open?id=18U_yunQHUlQnX9W4dEmL5nwlTdhuWWj_">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
The basic Image Controller class is used to control Image components and display images of various formats in the Scene. This package supports reading data via the url format.<br />
<br />
<b>Movie Controller (</b><a href="https://drive.google.com/open?id=147FjZg4B-cHM_FycUHcRQ1O4gpgfjleN">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
The basic Movie Controller class is used to control VideoPlayer components and display various format movies in the Scene. This package supports reading data through clip and url formats.<br />
<br />
<b>Game Controller (</b><a href="https://drive.google.com/open?id=1arPEluJhFnwfdPwkp1znVtmL4NXynkb_">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Game Controller is the main package that contains a collection of gameplay types. Each module can function separately and can interact with each other depending on the design used. This package is an evolution of the previous class, namely the Global-xxx class.<br />
<br />
<b>Mobile Controller (</b><a href="https://drive.google.com/open?id=1ReXqjgs6QiONEUO2Hi77Ci7GEVTwgG0N">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Mobile Controller is an evolution of the Touchkit Manager package which serves to detect various types of touch / gesture in gadgets such as Tap, Double Tap, Swipe, Pinch, and Spread. Each gesture has been equipped with an event that can be modified as needed.<br />
<br />
<b>GPS Controller (</b><a href="https://drive.google.com/open?id=148BGFKdGpVdEAByfCav3Ap8NHkQACSh1">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
GPS Controller is a package that serves to display GPS values on the gadget in realtime according to the location of the gadget. This package is also the basic package for building the mechanical Markerless Augmented Reality (AR) style of Pokemon Go.<br />
<br />
<b>Reality Controller (</b><a href="https://drive.google.com/open?id=1pYMBtvHDDc5EKfBBa4rnp_EIbZ6548-6">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
The Reality Controller is a special package containing various scripts to control additional gadgets and peripherals such as Kinect, LeapMotion and others.<br />
<br />
<div>
<b>Vuforia Controller (</b><a href="https://drive.google.com/open?id=1dIdIV9WCH49AzhBkcdwKQnpfvrFgABoN">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Vuforia Controller is a special package intended to access the tracking base script in the Vuforia package. As the name implies, this package can only work if you have configured vuforia correctly on your Unity project.<br />
<br />
<hr />
<br />
<b>Disclaimers:</b><br />
<i>Zetpack is intended for those of you who want to build Unity based games but do not have the ability of programmers. However it is recommended that you understand the concept of design patterns, game mechanic analysis and trouble shooting before using it.</i><br />
<br />
<b>Licence:</b><br />
<i>Zetpack is released using a CC / NC (Creative Common / Non-Commercial) license. You are permitted to use ZetPack for non-commercial type products or educational purposes. For commercial project use, please contact sales@imedia9.net or via facebook.com/imedia9.net</i></div>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-39901645658429077362019-07-26T20:49:00.000-07:002019-07-26T20:15:56.284-07:00Zetpack Framework - View<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt503UafCw3xp9IOniXVDA25uFG8wuaci3UJ_7QLvZKRczcHbUX4fFYuXQ12VGUKA6-Xb_pomU7H9PKk2uoSAcNX-INsF4DGMxAODYfMETBZnfboy4r8bCuqgvI13S_wxd_-IG0jlaFdYg/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="636" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt503UafCw3xp9IOniXVDA25uFG8wuaci3UJ_7QLvZKRczcHbUX4fFYuXQ12VGUKA6-Xb_pomU7H9PKk2uoSAcNX-INsF4DGMxAODYfMETBZnfboy4r8bCuqgvI13S_wxd_-IG0jlaFdYg/s640/ZetpackWall.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
ZetPack is the Unity library to speed up the game development process as fast as a razor blade. Zetpack is an evolution from IMedia9. KIT and Kancil Code for the development of PC and Mobile based games (Android) by prioritizing the application of the MVC concept (Model, View, Controller) adopted from modern programming concepts, especially web applications.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJopKDgNbSPX1fCJfV259Ta-ltGc-yQPyTXcHP47JOCCQCXOwgdmKgLUbiNAYySkb4PO2aGd1nhmLZpMPS9wpTZOuthW8lEhcev8pYEPp_idEYNqVLYq2qYoa9oLmPUtrGRoBvHEvbiUmx/s1600/Zetpack-MCV.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="464" data-original-width="649" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJopKDgNbSPX1fCJfV259Ta-ltGc-yQPyTXcHP47JOCCQCXOwgdmKgLUbiNAYySkb4PO2aGd1nhmLZpMPS9wpTZOuthW8lEhcev8pYEPp_idEYNqVLYq2qYoa9oLmPUtrGRoBvHEvbiUmx/s640/Zetpack-MCV.jpg" width="640" /></a></div>
<br />
Zetpack adopts the MVC concept by mapping all general mechanics in the game and breaking them down into modular classes. The main package that is the basis of the Zetpack Framework is a Variable Model that contains a collection of basic variables that will be input to the package controller to produce interaction with the player and displayed using package View on the User Interface component.<br />
<br />
<hr />
<br />
<b><span style="font-size: x-large;">VIEW </span></b><br />
<br />
<b>Animation View (</b><a href="https://drive.google.com/open?id=1T4sP4NqrNuKeTdPkvCGoUjNLyjqx8IPx">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Animation View contains a collection of types of animations related to UI. There are various types of animations that consist of In-Animation, Out-Animation and Loop Animtaion which are very suitable for use in the game user interface and all animated options can be modified through the inspector.<br />
<br />
<b>Camera View (</b><a href="https://drive.google.com/open?id=1OdvpMELmSH4het6LmJ0cWinW0S5JNSyS">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Camera View berisi kumpulan jenis kamera pada beragam genre game yang berbeda seperti FPS, RPG dan RTS. Secara default, setiap prefab Camera bersesuaian dengan penggunaan pergerakan player tertentu. Meski demikian kombinasi prefab Camera dan pergerakan karakter yang berbeda dapat menghasilkan gameplay yang unik.<br />
<br />
<b>Dialog View (</b><a href="https://drive.google.com/open?id=12x4GxWrCHnKucHMDHhfpGE0abeI-keiS">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
The View dialog contains a collection of panels that have been equipped with basic script interactions with mouse / touch such as drag-drop and resize. This package also contains a basic prefab to display variables.<br />
<br />
<b>Effect View (</b><a href="https://drive.google.com/open?id=1SjWeWMEhq0EcfbvO0vai4iw5HOJJZbS3">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Effect View contains a collection of materials, textures, shaders and projector components that can be used to enhance the appearance of the scene during the rendering process.<br />
<br />
<b>Environment View (</b><a href="https://drive.google.com/open?id=1L9ljImiWkR4dy0ihWm7g955I3Ew3LQMD">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
The Environment View contains a collection of art, texture, sprites and models that can be used to speed up the process of building levels and user interfaces. This package will be updated as needed.<br />
<br />
<hr />
<br />
<b>Disclaimers:</b><br />
<i>Zetpack is intended for those of you who want to build Unity based games but do not have the ability of programmers. However it is recommended that you understand the concept of design patterns, game mechanic analysis and trouble shooting before using it.</i><br />
<br />
<b>Licence:</b><br />
<i>Zetpack is released using a CC / NC (Creative Common / Non-Commercial) license. You are permitted to use ZetPack for non-commercial type products or educational purposes. For commercial project use, please contact sales@imedia9.net or via facebook.com/imedia9.net</i>Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-64825017474811411132019-07-26T20:47:00.000-07:002019-07-26T20:15:30.177-07:00Zetpack Framework - Model<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt503UafCw3xp9IOniXVDA25uFG8wuaci3UJ_7QLvZKRczcHbUX4fFYuXQ12VGUKA6-Xb_pomU7H9PKk2uoSAcNX-INsF4DGMxAODYfMETBZnfboy4r8bCuqgvI13S_wxd_-IG0jlaFdYg/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="636" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt503UafCw3xp9IOniXVDA25uFG8wuaci3UJ_7QLvZKRczcHbUX4fFYuXQ12VGUKA6-Xb_pomU7H9PKk2uoSAcNX-INsF4DGMxAODYfMETBZnfboy4r8bCuqgvI13S_wxd_-IG0jlaFdYg/s640/ZetpackWall.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
ZetPack is the Unity library to speed up the game development process as fast as a razor blade. Zetpack is an evolution from IMedia9. KIT and Kancil Code for the development of PC and Mobile based games (Android) by prioritizing the application of the MVC concept (Model, View, Controller) adopted from modern programming concepts, especially web applications.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJopKDgNbSPX1fCJfV259Ta-ltGc-yQPyTXcHP47JOCCQCXOwgdmKgLUbiNAYySkb4PO2aGd1nhmLZpMPS9wpTZOuthW8lEhcev8pYEPp_idEYNqVLYq2qYoa9oLmPUtrGRoBvHEvbiUmx/s1600/Zetpack-MCV.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="464" data-original-width="649" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJopKDgNbSPX1fCJfV259Ta-ltGc-yQPyTXcHP47JOCCQCXOwgdmKgLUbiNAYySkb4PO2aGd1nhmLZpMPS9wpTZOuthW8lEhcev8pYEPp_idEYNqVLYq2qYoa9oLmPUtrGRoBvHEvbiUmx/s640/Zetpack-MCV.jpg" width="640" /></a></div>
<br />
Zetpack adopts the MVC concept by mapping all general mechanics in the game and breaking them down into modular classes. The main package that is the basis of the Zetpack Framework is a Variable Model that contains a collection of basic variables that will be input to the package controller to produce interaction with the player and displayed using package View on the User Interface component.<br />
<br />
<br />
<hr />
<br />
<b><span style="font-size: x-large;">MODEL </span></b><br />
<br />
<b>Variable Model (</b><a href="https://drive.google.com/open?id=1-Gbyy0iiJhOFxD1o4BNjZR6Jxx7dfleL">Download</a><b>)</b><br />
<div>
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
Variable models contain 9 types of variable classes which are core variables commonly found in games. This variable is also the core of the modular interaction process with all other packages. The 9 variables are integer, float, string, bool, health, mana, exp, score and time.<br />
<br />
<b>XMLModel (</b><a href="https://drive.google.com/open?id=1jIDkZwMVHQFhthjZg9BlONDYS4fPd3H9">Download</a><b>)</b><br />
<b><br /></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s1600/ZetpackWall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="395" data-original-width="636" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBxKVc6Yu8fsEy9kmDbyqgxdtB4BNPuKeLq1dmSZ2sy74UQvpa_SgN-rg3U_OigAE-fN0fH-oTNwSBGRjZscvQJMz9fDIEfEg-RSzlfhz9F7gmPUgp0ALFyU-5lpKPZQ8-P6HUagP5SWa/s320/ZetpackWall.jpg" width="320" /></a><br />
<br />
XML Model is a special class that is related to the reading process, writing or parser XML format files that are placed specifically in the StreamingAssets folder.<br />
<br />
<hr />
<br />
<b>Disclaimers:</b><br />
<i>Zetpack is intended for those of you who want to build Unity based games but do not have the ability of programmers. However it is recommended that you understand the concept of design patterns, game mechanic analysis and trouble shooting before using it.</i><br />
<br />
<b>Licence:</b><br />
<i>Zetpack is released using a CC / NC (Creative Common / Non-Commercial) license. You are permitted to use ZetPack for non-commercial type products or educational purposes. For commercial project use, please contact sales@imedia9.net or via facebook.com/imedia9.net</i>Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-88737238384372009352019-07-26T20:41:00.000-07:002019-07-26T20:16:35.040-07:00React Native - API Request<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native - Still within SearchPage.js, update the initial state in the class constructor to add a message variable to the end of the list:<br />
<br />
message: '',<br />
<br />
Within render, add the following to the bottom of your UI, right after the spinner:<br />
<br />
<Text style={styles.description}>{this.state.message}</Text><br />
<br />
You’ll use this to display a range of messages to the user.<br />
<br />
Add the following code to the end of _executeQuery:<br />
<br />
fetch(query)<br />
.then(response => response.json())<br />
.then(json => this._handleResponse(json.response))<br />
.catch(error =><br />
this.setState({<br />
isLoading: false,<br />
message: 'Something bad happened ' + error<br />
}));<br />
<br />
This makes use of the fetch function, which is part of the Fetch API. The asynchronous response is returned as a Promise. The success path calls _handleResponse which you’ll define next, to parse the JSON response.<br />
<br />
Add the following function to SearchPage:<br />
<br />
_handleResponse = (response) => {<br />
this.setState({ isLoading: false , message: '' });<br />
if (response.application_response_code.substr(0, 1) === '1') {<br />
console.log('Properties found: ' + response.listings.length);<br />
} else {<br />
this.setState({ message: 'Location not recognized; please try again.'});<br />
}<br />
};<br />
<br />
This clears isLoading and logs the number of properties found if the query was successful.<br />
<br />
Note: Nestoria has a number of non-1** response codes that are potentially useful. For example, 202 and 200 return a list of best-guess locations.<br />
<br />
Save your changes, head back to the emulator and press Go. You should see a debug log message saying that 20 properties (the default result size) were found:<br />
<br />
08-01 18:18:07.261 5444 8447 I ReactNativeJS: Properties found: 20<br />
<br />
Also note that when this message is logged, the spinner goes away.<br />
<br />
It’s time to see what those 20 properties actually look like!<br />
<br />
Displaying the Results<br />
Create a new file SearchResults.js, and add the following:<br />
<br />
'use strict';<br />
<br />
import React, { Component } from 'react'<br />
import {<br />
StyleSheet,<br />
Image,<br />
View,<br />
TouchableHighlight,<br />
FlatList,<br />
Text,<br />
} from 'react-native';<br />
<br />
This imports the relevant modules you’ll use.<br />
<br />
Next, add the component:<br />
<br />
type Props = {};<br />
export default class SearchResults extends Component<Props> {<br />
static navigationOptions = {<br />
title: 'Results',<br />
};<br />
<br />
_keyExtractor = (item, index) => index.toString();<br />
<br />
_renderItem = ({item}) => {<br />
return (<br />
<TouchableHighlight<br />
underlayColor='#dddddd'><br />
<View><br />
<Text>{item.title}</Text><br />
</View><br />
</TouchableHighlight><br />
);<br />
<br />
};<br />
<br />
render() {<br />
const { params } = this.props.navigation.state;<br />
return (<br />
<FlatList<br />
data={params.listings}<br />
keyExtractor={this._keyExtractor}<br />
renderItem={this._renderItem}<br />
/><br />
);<br />
}<br />
}<br />
<br />
The above code makes use of a more specialized component — FlatList — which displays rows of data within a scrolling container, similar to RecyclerView. Here’s a look at the FlatList properties:<br />
<br />
data provides the data to display<br />
keyExtractor provides a unique key that React uses for efficient list item management<br />
renderItem specifies how the UI is rendered for each row<br />
Save your new file.<br />
<br />
In App.js, add the following just beneath the import statements:<br />
<br />
import SearchResults from './SearchResults';<br />
<br />
This brings in the newly added SearchResults class.<br />
<br />
Now, modify your createStackNavigator as follows:<br />
<br />
const App = createStackNavigator({<br />
Home: { screen: SearchPage },<br />
Results: { screen: SearchResults },<br />
});<br />
<br />
This adds a new route named Results to the navigator and registers SearchResults as the component that will handle this route. When a component is registered with a navigator, it gets a navigation prop added to it that can be used to manage screen transitions and pass in data.<br />
<br />
Save your file changes.<br />
<br />
In SearchPage.js, go to _handleResponse and replace the console.log statement with the following:<br />
<br />
this.props.navigation.navigate(<br />
'Results', {listings: response.listings});<br />
<br />
This navigates to your newly added route and passes in the listings data from the API request via the params argument.<br />
<br />
Save your changes, head back to the emulator and press Go. You’ll be greeted by a list of properties:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_display_results-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_display_results-281x500.png" width="358" /></a></div>
<br />
<br />
It’s great to see the property listings, but that list is a little drab. Time to liven things up a bit.<br />
<br />
A Touch of Style<br />
Add the following style definition at the end of SearchResults.js:<br />
<br />
const styles = StyleSheet.create({<br />
thumb: {<br />
width: 80,<br />
height: 80,<br />
marginRight: 10<br />
},<br />
textContainer: {<br />
flex: 1<br />
},<br />
separator: {<br />
height: 1,<br />
backgroundColor: '#dddddd'<br />
},<br />
price: {<br />
fontSize: 25,<br />
fontWeight: 'bold',<br />
color: '#48BBEC'<br />
},<br />
title: {<br />
fontSize: 20,<br />
color: '#656565'<br />
},<br />
rowContainer: {<br />
flexDirection: 'row',<br />
padding: 10<br />
},<br />
});<br />
<br />
This defines all the styles that you are going to use to render each row.<br />
<br />
Add a new component representing a row by adding the following just under the import statements:<br />
<br />
class ListItem extends React.PureComponent {<br />
_onPress = () => {<br />
this.props.onPressItem(this.props.index);<br />
}<br />
<br />
render() {<br />
const item = this.props.item;<br />
const price = item.price_formatted.split(' ')[0];<br />
return (<br />
<TouchableHighlight<br />
onPress={this._onPress}<br />
underlayColor='#dddddd'><br />
<View><br />
<View style={styles.rowContainer}><br />
<Image style={styles.thumb} source={{ uri: item.img_url }} /><br />
<View style={styles.textContainer}><br />
<Text style={styles.price}>{price}</Text><br />
<Text style={styles.title}<br />
numberOfLines={1}>{item.title}</Text><br />
</View><br />
</View><br />
<View style={styles.separator}/><br />
</View><br />
</TouchableHighlight><br />
);<br />
}<br />
}<br />
<br />
This manipulates the returned price, which is in the format 300,000 GBP, to remove the GBP suffix. Then it renders the row UI using techniques that you are by now quite familiar with. Of note, an Image is added to the row and is loaded from a returned URL (item.img_url) which React Native decodes off the main thread.<br />
<br />
You may have noticed that this component extends React.PureComponent. React re-renders a Component if its props or state changes. React only re-renders a PureComponent if a shallow compare of the state and props shows changes. Used under the right conditions, this can give your app a performance boost.<br />
Now replace _renderItem with the following:<br />
<br />
_renderItem = ({item, index}) => (<br />
<ListItem<br />
item={item}<br />
index={index}<br />
onPressItem={this._onPressItem}<br />
/><br />
);<br />
<br />
_onPressItem = (index) => {<br />
console.log("Pressed row: "+index);<br />
};<br />
<br />
_onPressItem is passed into ListItem to handle a row selection. This design pattern is equivalent to a callback. In this callback, the index for the selected row is logged.<br />
<br />
Save your work, head back to the emulator, press Go, and check out your results:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_styled_results-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_styled_results-281x500.png" width="358" /></a></div>
<br />
<br />
Tap the first row and verify that your debug console reflects the selection:<br />
<br />
08-01 18:32:00.670 5444 9047 I ReactNativeJS: Pressed row: 0<br />
<br />
Try tapping other listings or searching other locations in the UK.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-73945082123241162042019-07-26T20:22:00.000-07:002019-07-26T20:16:22.247-07:00Laravel Tutorial - Testing<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s1600/laravel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="808" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s640/laravel.jpg" width="640" /></a></div>
<br />
Laravel - Laravel makes HTTP testing a breeze for performing integration tests against routes and middleware, so let’s write a few feature tests to verify our code works as expected.<br />
<br />
Before we get started, we need to adjust a few things in our phpunit.xml file so that we can use an in-memory SQLite database. You will need to make sure that you have the proper PHP modules installed.<br />
<br />
Using environment variables, we can change the database connection by adding a few new variables to the config:<br />
<br />
<php><br />
<!-- ... --><br />
<env name="DB_CONNECTION" value="sqlite"/><br />
<env name="DB_DATABASE" value=":memory:"/><br />
<!-- ... --><br />
</php><br />
Next, remove the placeholder test that ships with Laravel:<br />
<br />
rm tests/Feature/ExampleTest.php<br />
We are ready to start testing the /submit form through HTTP requests to make sure that the route validation, saving, and redirecting are working as expected.<br />
<br />
First, let’s create a new feature test to test against our route:<br />
<br />
php artisan make:test SubmitLinksTest<br />
The command creates a new testing file with the proper dependencies, including a RefreshDatabase trait that we are going to use to verify that our links are being saved to the database when valid.<br />
<br />
Open the new tests/Feature/SubmitLinksTest.php file and let’s define a few skeleton tests in the body of the class that we are going to flesh out:<br />
<br />
/** @test */<br />
function guest_can_submit_a_new_link() {}<br />
<br />
/** @test */<br />
function link_is_not_created_if_validation_fails() {}<br />
<br />
/** @test */<br />
function link_is_not_created_with_an_invalid_url() {}<br />
<br />
/** @test */<br />
function max_length_fails_when_too_long() {}<br />
<br />
/** @test */<br />
function max_length_succeeds_when_under_max() {}<br />
These tests should give you a high-level overview of what we are going to test:<br />
<br />
Verify that valid links get saved in the database<br />
When validation fails, links are not in the database<br />
Invalid URLs are not allowed<br />
Validation should fail when the fields are longer than the max:255 validation rule<br />
Validation should succeed when the fields are long enough according to max:255.<br />
We might be missing some things, but for your first Laravel application, this is a decent list that should illustrate some basic HTTP testing techniques in Laravel.<br />
<br />
Saving a valid link<br />
The first test we’ll write is the test that verifies that valid data gets stored in the database:<br />
<br />
<?php<br />
<br />
namespace Tests\Feature;<br />
<br />
use Illuminate\Validation\ValidationException;<br />
use Tests\TestCase;<br />
use Illuminate\Foundation\Testing\RefreshDatabase;<br />
<br />
class SubmitLinksTest extends TestCase<br />
{<br />
use RefreshDatabase;<br />
<br />
/** @test */<br />
function guest_can_submit_a_new_link()<br />
{<br />
$response = $this->post('/submit', [<br />
'title' => 'Example Title',<br />
'url' => 'http://example.com',<br />
'description' => 'Example description.',<br />
]);<br />
<br />
$this->assertDatabaseHas('links', [<br />
'title' => 'Example Title'<br />
]);<br />
<br />
$response<br />
->assertStatus(302)<br />
->assertHeader('Location', url('/'));<br />
<br />
$this<br />
->get('/')<br />
->assertSee('Example Title');<br />
}<br />
}<br />
Take note of the RefreshDatabase trait which makes sure that each test has a new database to give each test a pristine database environment with all the migrations.<br />
<br />
Our first test submits valid post data, which returns a response object that we can use to assert that our route responded as expected. We verify that the database contains a record with the title we just created.<br />
<br />
Next, we verify that the response was a 302 status code with a Location header pointing to the homepage.<br />
<br />
Last, we request the home page and verify that the link title is visible on the homepage.<br />
<br />
Testing Failed Validation<br />
When a user generally submits bad data, we expect the validation to trigger an exception and we can use that to make sure our validation layer is working:<br />
<br />
/** @test */<br />
function link_is_not_created_if_validation_fails()<br />
{<br />
$response = $this->post('/submit');<br />
<br />
$response->assertSessionHasErrors(['title', 'url', 'description']);<br />
}<br />
We use Laravel’s assertSessionHasErrors() to make sure that the session has validation errors for each of our required fields. Because we submitted empty data to the route, we expect the required rule will trigger for each field.<br />
<br />
Let’s run the test suite to verify our work thus far:<br />
<br />
$ vendor/bin/phpunit<br />
PHPUnit 6.4.3 by Sebastian Bergmann and contributors.<br />
<br />
... 3 / 3 (100%)<br />
<br />
Time: 173 ms, Memory: 16.00MB<br />
<br />
OK (3 tests, 10 assertions)<br />
Testing URL Validation<br />
We expect only valid URLs to pass validation so that our application doesn’t try to display invalid data.<br />
<br />
/** @test */<br />
function link_is_not_created_with_an_invalid_url()<br />
{<br />
$this->withoutExceptionHandling();<br />
<br />
$cases = ['//invalid-url.com', '/invalid-url', 'foo.com'];<br />
<br />
foreach ($cases as $case) {<br />
try {<br />
$response = $this->post('/submit', [<br />
'title' => 'Example Title',<br />
'url' => $case,<br />
'description' => 'Example description',<br />
]);<br />
} catch (ValidationException $e) {<br />
$this->assertEquals(<br />
'The url format is invalid.',<br />
$e->validator->errors()->first('url')<br />
);<br />
continue;<br />
}<br />
<br />
$this->fail("The URL $case passed validation when it should have failed.");<br />
}<br />
}<br />
Laravel 5.5 introduced the withoutExceptionHandling() method which disables Laravel’s route exception handling code used to generate an HTTP response after an exception. We use this to our advantage so we can inspect the validation exception object and assert against the error messages.<br />
<br />
We loop through various cases (add your own if you’d like to cover more scenarios) and catch instances of ValidationException. If the text makes it past the exception handling, we manually fail the test because we expect the route throws a ValidationExcepiton exception each time.<br />
<br />
The catch block uses the validator object to check the url error and asserts that the actual error message matches the expected validation error message.<br />
<br />
I like using the try/catch technique, followed by a $this->fail() as a safety harness instead of using exception annotations provided by PHPUnit. I feel catching the exception allows the ability to do assertions that wouldn’t otherwise be possible and provides a more granular control that I like in most cases.<br />
<br />
Testing Max Length Validation<br />
We will test a few scenarios with the max:255 validations rules: when the field fails max-length validation with a length of 256 characters, and when the field is long enough to pass validation at 255 characters.<br />
<br />
Although Laravel contains the max validation rule functionality, I like to test it to verify that my application applies the rules. If someone removes the max validation rule, then the tests will catch it.<br />
<br />
I like to test the threshold of min and max validation rules as an extra caution to make sure my application respects the min and max boundaries I set.<br />
<br />
First, let’s test the “max length” scenario:<br />
<br />
/** @test */<br />
function max_length_fails_when_too_long()<br />
{<br />
$this->withoutExceptionHandling();<br />
<br />
$title = str_repeat('a', 256);<br />
$description = str_repeat('a', 256);<br />
$url = 'http://';<br />
$url .= str_repeat('a', 256 - strlen($url));<br />
<br />
try {<br />
$this->post('/submit', compact('title', 'url', 'description'));<br />
} catch(ValidationException $e) {<br />
$this->assertEquals(<br />
'The title may not be greater than 255 characters.',<br />
$e->validator->errors()->first('title')<br />
);<br />
<br />
$this->assertEquals(<br />
'The url may not be greater than 255 characters.',<br />
$e->validator->errors()->first('url')<br />
);<br />
<br />
$this->assertEquals(<br />
'The description may not be greater than 255 characters.',<br />
$e->validator->errors()->first('description')<br />
);<br />
<br />
return;<br />
}<br />
<br />
$this->fail('Max length should trigger a ValidationException');<br />
}<br />
Again, we disable exception handling and create data that is one character too long to pass validation.<br />
<br />
We assert each field to make sure they all have a max length validation error message.<br />
<br />
Last, we need to return in the caught exception and use the $this->fail() as a safety harness to fail the test.<br />
<br />
Next, we test the “under the max” scenario:<br />
<br />
/** @test */<br />
function max_length_succeeds_when_under_max()<br />
{<br />
$url = 'http://';<br />
$url .= str_repeat('a', 255 - strlen($url));<br />
<br />
$data = [<br />
'title' => str_repeat('a', 255),<br />
'url' => $url,<br />
'description' => str_repeat('a', 255),<br />
];<br />
<br />
$this->post('/submit', $data);<br />
<br />
$this->assertDatabaseHas('links', $data);<br />
}<br />
We make the form data long enough to pass max:255 validation and assert that the data is in the database after submitting the data.<br />
<br />
Run the test suite and make sure everything is passing:<br />
<br />
$ vendor/bin/phpunit<br />
PHPUnit 6.4.3 by Sebastian Bergmann and contributors.<br />
<br />
...... 6 / 6 (100%)<br />
<br />
Time: 197 ms, Memory: 16.00MB<br />
<br />
OK (6 tests, 17 assertioRickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-59876654312327137522019-07-26T20:04:00.002-07:002019-07-26T20:04:26.639-07:00Unity Tutorial - Play Button<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc57sCTh4n9I9LnQVlO6kuzfUSoVEO4V_Pls1CkQKdu-mQ-ghgD3xNE6KbnoHPdnXiLkIfzSmfwhuw1scYcwaed3M_W6Nk_7Wc3c7v3vQ7Coe_5FGGlWN_OoT0mnSTwRvQB_5cCVOWolL/s1600/unitylogo2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1001" data-original-width="1600" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc57sCTh4n9I9LnQVlO6kuzfUSoVEO4V_Pls1CkQKdu-mQ-ghgD3xNE6KbnoHPdnXiLkIfzSmfwhuw1scYcwaed3M_W6Nk_7Wc3c7v3vQ7Coe_5FGGlWN_OoT0mnSTwRvQB_5cCVOWolL/s640/unitylogo2.jpg" width="640" /></a></div>
<br />
Unity Tutorial - <span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;">The</span><span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;"> </span><span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; font-weight: 700;">Play Buttons</span><span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;"> </span><span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;">let you start and stop your game. The first button is the</span><span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;"> </span><span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; font-weight: 700;">Play</span><span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;"> </span><span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;">button:</span><br />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons1-1.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Playbuttons1" class="aligncenter size-full wp-image-150638" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="57" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons1-1.png" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="206" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
A few things happen when you click the Play button; First, your game will start, as expected. The button set will also turn blue to indicate the game is in motion:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons2.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Playbuttons2" class="aligncenter size-full wp-image-150631" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="57" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons2.png" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="206" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The entire design interface dims as well to indicate the game is active:</div>
<div class="wp-caption aligncenter" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_150640" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin: 36px auto; width: 610px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; transition: all 0.3s ease-out 0s;"><img alt="The top image is the editor while making the game whereas the lower image is the game being played." class="size-full wp-image-150640" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="612" sizes="(max-width: 600px) 100vw, 600px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1.png 600w, https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1-314x320.png 314w, https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1-490x500.png 490w, https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2016/12/Playdiff-1-64x64.png 64w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="600" /></a><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-family: "IBM Plex Serif", serif; font-size: 0.9375rem; line-height: 1.58; margin-top: 9px;">
The top image is the editor while making the game whereas the lower image is the game being played.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Remember, any changes you make on-the-fly will be lost once you stop the game. It’s a common mistake for Unity beginners and regulars alike to run the game and make a pile of changes – which all disappear when the game stops! The interface dimming is supposed to help remind you of this unfortunate fact, but I find the color shade is too subtle to remind me all the time.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Thankfully, you can change this shading to suit.</div>
<ol data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; list-style-image: initial; list-style-position: initial; margin: 24px 0px 0px; padding: 0px 0px 0px 24px;" type="1">
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Open the Unity preferences window.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Select the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Colors</span> tab on the left hand side and you’ll see a list of colors in the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Colors</span>section that you can customize in your interface:<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Preferences Colors Panel" class="aligncenter size-full wp-image-151967" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="628" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/Preferences_Colors.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Preferences_Colors.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Preferences_Colors-357x320.png 357w, https://koenig-media.raywenderlich.com/uploads/2017/01/Preferences_Colors-557x500.png 557w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Playmode</span> tint field controls the dimming color of the interface.</div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Colorplaymode.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Colorplaymode" class="aligncenter size-full wp-image-150642" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="312" sizes="(max-width: 600px) 100vw, 600px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Colorplaymode.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/Colorplaymode.png 600w, https://koenig-media.raywenderlich.com/uploads/2016/12/Colorplaymode-480x250.png 480w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="600" /></a></div>
</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">You can choose any color by clicking in the indicated area.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">To reset to the original color simply click the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Use Defaults</span> button.</li>
</ol>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Next up is the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Pause</span> button:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons3.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Playbuttons3" class="aligncenter size-full wp-image-150630" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="57" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons3.png" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="206" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
This pauses your game and lets you make modifications to the game. Just like in play mode those modifications will be lost once you stop the game. Regard editing game objects during play and pause as a cheat and balancing system that allows you to experiment on your game without the danger of permanently breaking it.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Finally there’s the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Step</span> button:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons4.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Playbuttons4" class="aligncenter size-full wp-image-150629" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="57" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Playbuttons4.png" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="206" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
This lets you step through your game one frame at a time; it’s handy when you want to observe animations on a frame-by-frame basis, or when you want to check the state of particular GameObjects during gameplay:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Step.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Step" class="aligncenter size-full wp-image-150643" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="369" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Step.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<h3 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-010" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.3125rem; letter-spacing: -0.5px; line-height: 1.35; margin: 36px 0px 0px;">
8. Miscellaneous Editor Settings</h3>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The final controls handle miscellaneous aspects of the editor. The first is the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Collab</span>drop-down. Found on the right hand side of the toolbar:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Collab-1.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Collab" class="aligncenter size-large wp-image-150940" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="500" sizes="(max-width: 438px) 100vw, 438px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Collab-1-438x500.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/Collab-1-438x500.png 438w, https://koenig-media.raywenderlich.com/uploads/2016/12/Collab-1-281x320.png 281w, https://koenig-media.raywenderlich.com/uploads/2016/12/Collab-1.png 663w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="438" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
This is one of Unity’s latest services that helps big teams collaborate on a single project seamlessly.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The next button is the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Services</span> button. The services button is where you can add additional Unity services to the game. Clicking on the button will prompt you to create a Unity Project ID.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Services2.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Services2" class="aligncenter size-large wp-image-150647" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="500" sizes="(max-width: 338px) 100vw, 338px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Services2-338x500.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/Services2-338x500.png 338w, https://koenig-media.raywenderlich.com/uploads/2016/12/Services2-216x320.png 216w, https://koenig-media.raywenderlich.com/uploads/2016/12/Services2.png 1150w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="338" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Once you add a Project ID, you will be able to add services to your project. For instance, you can add cloud builds to your project. This automatically builds your project for you so you don’t have to wait for each project build. You can also add <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Analytics</span>, <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">In-Game Ads</span>, <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Multiplayer</span> support, <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">In-App Purchasing</span>, <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Performance Reporting</span> and <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Collaborate</span>… umm… again, in case you missed it in the previous button.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
You can also add team members to the project, set age restrictions, and change some important project settings.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Next up is the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Account</span> button, this lets you manage your Unity account. It allows you to view your account data, sign in and out, and upgrade:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Account-2.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Account" class="aligncenter size-full wp-image-150941" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="115" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Account-2.png" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="362" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The fourth button is the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Layers</span> button.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/LayersMenu.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="LayersMenu" class="aligncenter size-full wp-image-150644" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="345" sizes="(max-width: 362px) 100vw, 362px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/LayersMenu.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/LayersMenu.png 362w, https://koenig-media.raywenderlich.com/uploads/2016/12/LayersMenu-336x320.png 336w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="362" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
You can use Layers for such things as preventing the rendering of GameObjects, or excluding GameObjects from physics events like collisions.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The final button, <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Layouts</span>, lets you create and save the layout of views in your editor and switch between them. Unity is wonderfully customizable, and each of the different views in a layout can be resized, docked, moved, or even removed from the editor altogether:</div>
<div class="wp-caption aligncenter" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_150935" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin: 36px auto; width: 710px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/OpaqueCustomLayout.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; transition: all 0.3s ease-out 0s;"><img alt="Watch as windows auto snap and dock as you drag them, alternatively you can keep them floating or drag them onto another monitor if you have a multi monitor setup!" class="size-full wp-image-150935" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="373" src="https://koenig-media.raywenderlich.com/uploads/2016/12/OpaqueCustomLayout.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-family: "IBM Plex Serif", serif; font-size: 0.9375rem; line-height: 1.58; margin-top: 9px;">
Watch as windows auto snap and dock as you drag them, alternatively you can keep them floating or drag them onto another monitor if you have a multi monitor setup!</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Don’t worry though — you can always add views you’ve removed back to the interface. This lets you customize the editor for a specific task. For example, you may not want to have the Game View open when working with an animation, but you’d prefer to have the Animator and Animation Views open side-by-side.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Rearranging the windows every single time you wanted this specific layout would become tiresome very quickly. Unity saves you from this tedium by letting you save your layouts, which you can switch to at any time via the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Layouts</span> button. Opening a new widow can can easily be done using the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Window</span> menu item:</div>
<div class="wp-caption aligncenter" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_151259" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin: 36px auto; width: 378px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/LayoutAndWindow.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; transition: all 0.3s ease-out 0s;"><img alt="Layouts can be saved and recalled using the Layout button. Unity comes with a few pre-defined layouts, such as the 2 by 3 layout and Wide layouts. The Window option from the menubar provides a list of views that you can add to your editor." class="size-large wp-image-151259" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="500" sizes="(max-width: 368px) 100vw, 368px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/LayoutAndWindow-368x500.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/LayoutAndWindow-368x500.png 368w, https://koenig-media.raywenderlich.com/uploads/2016/12/LayoutAndWindow-236x320.png 236w, https://koenig-media.raywenderlich.com/uploads/2016/12/LayoutAndWindow.png 700w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="368" /></a><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-family: "IBM Plex Serif", serif; font-size: 0.9375rem; line-height: 1.58; margin-top: 9px;">
Layouts can be saved and recalled using the Layout button. Unity comes with a few pre-defined layouts, such as the 2 by 3 layout and Wide layouts. The Window option from the menubar provides a list of views that you can add to your editor.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
As you work on games in Unity, you’ll find yourself creating many different layouts to support your various development tasks.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
That covers the majority of the views you’ll use when making games, but there are many more views beyond just these. You can get an overview over them in the <a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="http://docs.unity3d.com/Manual/OtherViews.html" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;">Unity documentation</a>.</div>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-82947495111585814922019-07-26T20:03:00.002-07:002019-07-26T20:03:40.777-07:00Unity Tutorial - GameObject Axis<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc57sCTh4n9I9LnQVlO6kuzfUSoVEO4V_Pls1CkQKdu-mQ-ghgD3xNE6KbnoHPdnXiLkIfzSmfwhuw1scYcwaed3M_W6Nk_7Wc3c7v3vQ7Coe_5FGGlWN_OoT0mnSTwRvQB_5cCVOWolL/s1600/unitylogo2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1001" data-original-width="1600" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc57sCTh4n9I9LnQVlO6kuzfUSoVEO4V_Pls1CkQKdu-mQ-ghgD3xNE6KbnoHPdnXiLkIfzSmfwhuw1scYcwaed3M_W6Nk_7Wc3c7v3vQ7Coe_5FGGlWN_OoT0mnSTwRvQB_5cCVOWolL/s640/unitylogo2.jpg" width="640" /></a></div>
<br />
Unity Tutoria - <span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;">You use the toolbar to manipulate the various GameObjects in the Scene view. You’ll be using the following tools a lot as you develop your game, so get familiar with them by trying out all of them on your empty project!</span><br />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
However, you won’t be able to see the effect very well in an empty Scene. So add a simple Cube to the scene:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Add a Cube to the Scene" class="aligncenter size-full wp-image-151935" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="417" sizes="(max-width: 696px) 100vw, 696px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/add_cube.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/add_cube.png 696w, https://koenig-media.raywenderlich.com/uploads/2017/01/add_cube-480x288.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/add_cube-650x389.png 650w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="696" /></div>
<ol data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; list-style-image: initial; list-style-position: initial; margin: 24px 0px 0px; padding: 0px 0px 0px 24px;">
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Open the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">GameObject</span> dropdown from the Unity Menu.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Select the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">3D Object</span> dropdown.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Select <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Cube</span> from the list of available objects. This will give you a visual reference point while you explore the Toolbar options.<div class="note" data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background: rgb(9, 11, 11); border-color: rgb(84, 83, 81) !important; border-radius: 0.5625rem; box-sizing: inherit; font-size: 1rem; margin-top: 24px; padding: 20px 24px;">
<span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: rgb(4, 6, 7) !important; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Note:</span> if you lose track of the Cube while experimenting with the options, just <span data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: rgb(4, 6, 7) !important; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Double Click</span> the Cube GameObject in the Hierachy View. This will center the Cube for you in the Scene View.</div>
</li>
</ol>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Hand tool</span> is a “handy” tool (don’t worry folks, the jokes get worse!) with a bunch of useful features built right in:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar1.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="toolbar1" class="aligncenter size-medium wp-image-150637" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="46" sizes="(max-width: 480px) 100vw, 480px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar1-480x46.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar1-480x46.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar1.png 638w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="480" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Select the Hand tool, then drag over the Scene view to pan the entire scene:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Panning the scene" class="aligncenter size-full wp-image-152033" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_pan.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Right-click and drag to rotate the camera around your current position; notice that the hand icon transforms into an eye:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Rotate the viewpoint" class="aligncenter size-full wp-image-152034" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_rotate_scene.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Next, hold down <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Ctrl (or Cmd)</span> and <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Alt (or Option)</span>, right-click and move the mouse up to zoom into the scene. Moving the mouse down zooms out. Or if you want do it the easy way, just just use the scroll wheel:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Zooming the scene" class="aligncenter size-full wp-image-152035" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_zoom.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Finally, hold down the right mouse button and use your <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">WASD</span> keys to move around the scene like you would in a first person shooter. Likewise, you can move up and down by pressing <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">E</span> or <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Q</span> respectively. To move even faster, hold down the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Shift</span> key as well:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="First person movement" class="aligncenter size-full wp-image-152036" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_1st_person.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The hand tool’s default shortcut key is <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Q</span>. To jump quickly to the hand tool, press the middle mouse button. Once you release it, you’ll return back to the previous tool you were using.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Translate tool</span> lets you select and position a GameObject in the scene:<br data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit;" /><a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar2.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="toolbar2" class="aligncenter size-medium wp-image-150636" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="46" sizes="(max-width: 480px) 100vw, 480px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar2-480x46.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar2-480x46.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar2.png 638w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="480" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
You’ll notice when you select a GameObject while the Translate Tool is active, you’ll see three colored arrows growing from its center. These arrows indicate the three-dimensional axes of the object: the x-axis is the red arrow, the y-axis is the green arrow, and the z-axis is the blue arrow:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Transform a GameObject" class="aligncenter size-full wp-image-152037" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_transform.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Unity’s coordinate system is <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">left-handed</span>. For a deeper explanation about left- and right-handed coordinate systems, check out this <a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="http://what-when-how.com/xna-game-studio-4-0-programmingdeveloping-for-windows-phone-7-and-xbox-360/3d-math-basics-xna-game-studio-4-0-programming-part-1/" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;" target="_blank">interesting article</a> about the different coordinate systems..</div>
<div class="note" data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background: rgb(4, 6, 7); border-color: rgb(84, 83, 81) !important; border-radius: 0.5625rem; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 16px; margin-top: 24px; padding: 20px 24px;">
<span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Note:</span> this group of three colored arrows are known as a <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">gizmo</span> in Unity-speak. A gizmo is 3D geometry or texture that provides information regarding the GameObject.<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
In this case, the gizmo indicates the direction of each axis. As you learn more about Unity, you’ll be able to add your own gizmos to indicate things such as spawn points, the location of cameras or even the wind direction. The great thing about gizmos is they’re only displayed in the Scene View, and you can turn them off when they’re no longer needed.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
There are many ways to move your GameObject with the Translate tool. You can select one of the arrows (which will turn Yellow when selected), then move the mouse; the GameObject will only move on that one axis. For example, if you selected the y-axis and moved an object while facing in a normal orientation, the GameObject would only move up or down.</div>
<div class="wp-caption aligncenter" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_152025" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin: 36px auto; width: 710px;">
<img alt="Detailed view of the three axis and the three planes that you can select to move the GameObject." class="size-full wp-image-152025" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="718" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/transform_details_annotated.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/transform_details_annotated.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/transform_details_annotated-312x320.png 312w, https://koenig-media.raywenderlich.com/uploads/2017/01/transform_details_annotated-487x500.png 487w, https://koenig-media.raywenderlich.com/uploads/2017/01/transform_details_annotated-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2017/01/transform_details_annotated-50x50.png 50w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-family: "IBM Plex Serif", serif; font-size: 0.9375rem; line-height: 1.58; margin-top: 9px;">
Detailed view of the three axis and the three planes that you can select to move the GameObject.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The three colored planes in the center of the GameObject let you move the GameObject on two axes; the square’s color indicates on what plane it will move. For instance, a green square means you can move an object on the y-plane (which means it can move on the x and y-axes):</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Transform a GameObject along a plane only" class="aligncenter size-full wp-image-152038" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_transform_plane.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The default shortcut key for the translate tool is <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">W</span>.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">rotate tool</span>, unsurprisingly, lets you rotate objects:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar3.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="toolbar3" class="aligncenter size-medium wp-image-150635" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="46" sizes="(max-width: 480px) 100vw, 480px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar3-480x46.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar3-480x46.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar3.png 638w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="480" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
You’ll notice three spherical colored lines when you select an object to rotate; these lines indicate the axis to rotate around. Simply select the line and drag your mouse to rotate the GameObject. To free rotate without being constrained to an axis, select the space between the lines and move your mouse:</div>
<div class="wp-caption aligncenter" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_152026" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin: 36px auto; width: 710px;">
<img alt="Select one of the colored lines to rotate around that axis." class="size-full wp-image-152026" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="700" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-320x320.png 320w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-500x500.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2017/01/Rotate_details_annotated-128x128.png 128w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-family: "IBM Plex Serif", serif; font-size: 0.9375rem; line-height: 1.58; margin-top: 9px;">
Select one of the colored lines to rotate around that axis.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Rotation of a GameObject" class="aligncenter size-full wp-image-152039" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_rotate.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The default shortcut key for the rotate tool is <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">E</span>.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Scale tool</span> lets you scale a GameObject either along a single axis, or proportionately on all axes.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar4.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="toolbar4" class="aligncenter size-medium wp-image-150634" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="46" sizes="(max-width: 480px) 100vw, 480px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar4-480x46.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar4-480x46.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar4.png 638w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="480" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
To scale an object along an axis, select the GameObject then drag the square end of an axis line; the GameObject will scale along that axis. To scale the entire GameObject, select the center point of the GameObject and drag the mouse either forwards or backwards to scale the GameObject up or down respectively:</div>
<div class="wp-caption aligncenter" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_152027" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin: 36px auto; width: 710px;">
<img alt="Scaling details; select one of the three axis to scale along that axis or the cube at the center of the axis to scale proportionally." class="size-full wp-image-152027" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="700" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-250x250.png 250w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-320x320.png 320w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-500x500.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-50x50.png 50w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-64x64.png 64w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-96x96.png 96w, https://koenig-media.raywenderlich.com/uploads/2017/01/Scale_details_annotated-128x128.png 128w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-family: "IBM Plex Serif", serif; font-size: 0.9375rem; line-height: 1.58; margin-top: 9px;">
Scaling details; select one of the three axis to scale along that axis or the cube at the center of the axis to scale proportionally.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Scaling a GameObject" class="aligncenter size-full wp-image-152040" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_scale.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The default shortcut key for the scale tool is <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">R</span>.</div>
<div class="note" data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background: rgb(4, 6, 7); border-color: rgb(84, 83, 81) !important; border-radius: 0.5625rem; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 16px; margin-top: 24px; padding: 20px 24px;">
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58;">
<span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Note:</span> Some of you may be a bit confused by the shortcut keys. You’d assume the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">S</span>cale shortcut would be the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">S</span> key instead of <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">R</span>. Believe it or not, there <i data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit;">is</i> a method to the madness. Do you notice a familiar pattern in the shortcut keys…perhaps one right at your fingertips?</div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Yep, it’s the top row of the keyboard! :] Unity assumes you’re using the mouse with your right hand and keyboarding with your left. Your fingers, at rest on the home row, will be on the ASDF keys. You’ll note each shortcut key of the toolbar corresponds to a key above the home position. The keyboard shortcuts for the toolbar corresponds to the QWERT keys, from left to right.</div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2015/09/Unity-Controls.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity Controls" class="aligncenter size-medium wp-image-116841" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="224" sizes="(max-width: 480px) 100vw, 480px" src="https://koenig-media.raywenderlich.com/uploads/2015/09/Unity-Controls-480x224.png" srcset="https://koenig-media.raywenderlich.com/uploads/2015/09/Unity-Controls-480x224.png 480w, https://koenig-media.raywenderlich.com/uploads/2015/09/Unity-Controls.png 700w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="480" /></a></div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Unfortunately, occasionally you’ll try to press the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">W</span> key but press the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">2</span> key by mistake. This puts the editor into 2D mode and will look a lot like this:</div>
<div class="wp-caption aligncenter" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="attachment_152041" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin: 36px auto; width: 694px;">
<img alt="In 2D mode, objects lose their depth" class="size-full wp-image-152041" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="558" src="https://koenig-media.raywenderlich.com/uploads/2017/01/primative_2d_toggle.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="684" /><div class="wp-caption-text" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #dbd3c4; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #ccc4b3; font-size: 1.0625rem; line-height: 1.58; margin-top: 9px;">
In 2D mode, objects lose their depth</div>
</div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
When that happens, simply press <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">2</span> again and the editor will revert back to 3D mode.</div>
</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Rect tool</span> is primarily used with 2D GameObjects and User Interface (UI) GameObjects, although you can use it on 3D GameObjects as well.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar5.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="toolbar5" class="aligncenter size-medium wp-image-150633" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="46" sizes="(max-width: 480px) 100vw, 480px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar5-480x46.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar5-480x46.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/12/toolbar5.png 638w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="480" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The tool can resize, scale, and rotate 2D assets and also reset the pivot point, which is the center point of rotation for the object. The pivot point is represented by a large circle on the asset:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/2Dmanipulate-1.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="2Dmanipulate" class="aligncenter size-full wp-image-150619" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="396" src="https://koenig-media.raywenderlich.com/uploads/2016/12/2Dmanipulate-1.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Can you guess its default shortcut key? That’s right, it’s <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">T</span>.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">gizmo display toggles</span> tend to be a point of confusion; they’re more than buttons, in fact — they’re toggle switches that control how you position gizmos in your scene.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The first switch toggles between <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Center</span> and <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Pivot</span> mode. When in center mode, if you select two GameObjects, the gizmo will be placed in the center of the two objects. Rotating the GameObjects rotates them around the center gizmo. In pivot mode, each GameObject rotates around its own pivot point, as illustrated below:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Pivot.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Pivot" class="aligncenter size-full wp-image-150608" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="396" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Pivot.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The second switch toggles between <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Global</span> and <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Local</span> space. In global mode, you’re manipulating your object from the point of view of the world around it. The x-axis goes left to right, the y-axis goes up and down, and the z-axis goes forward and backwards like usual. Switching to local mode works from the coordinate system of the object itself, and changes the axes to match that of the actual GameObject:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/12/Localworld.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Localworld" class="aligncenter size-full wp-image-150607" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="396" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Localworld.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-29918754027032782692019-07-26T20:02:00.001-07:002019-07-26T20:02:11.954-07:00Unity Tutorial - Interface Introduction<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc57sCTh4n9I9LnQVlO6kuzfUSoVEO4V_Pls1CkQKdu-mQ-ghgD3xNE6KbnoHPdnXiLkIfzSmfwhuw1scYcwaed3M_W6Nk_7Wc3c7v3vQ7Coe_5FGGlWN_OoT0mnSTwRvQB_5cCVOWolL/s1600/unitylogo2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1001" data-original-width="1600" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc57sCTh4n9I9LnQVlO6kuzfUSoVEO4V_Pls1CkQKdu-mQ-ghgD3xNE6KbnoHPdnXiLkIfzSmfwhuw1scYcwaed3M_W6Nk_7Wc3c7v3vQ7Coe_5FGGlWN_OoT0mnSTwRvQB_5cCVOWolL/s640/unitylogo2.jpg" width="640" /></a></div>
<br />
Unity Tutorial - <span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;">When Unity first opens, you’ll see a window that looks like this:</span><br />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image8-1.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity Initial Launch" class="aligncenter size-full wp-image-150583" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="371" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image8-1.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image8-1.png 700w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image8-1-480x254.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image8-1-650x345.png 650w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The interface can be a bit overwhelming at first. Take a deep breath and tell yourself it’s going to be all right! :] The interface is <i data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit;">highly</i> customizable and can provide you with as much or as little information as you need.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
In the upper right hand corner, you’ll see five buttons. Select the last one on the right which is called the em>Layout Dropdown, and from the list of options, select the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">2 by 3</span>option:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image9.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Image9" class="aligncenter size-full wp-image-150581" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="221" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image9.png" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="286" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Your editor should now look like the image below and have the following sections:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Unity Interface" class="aligncenter size-full wp-image-152024" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="371" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/UnityInterface.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/UnityInterface.png 700w, https://koenig-media.raywenderlich.com/uploads/2017/01/UnityInterface-480x254.png 480w, https://koenig-media.raywenderlich.com/uploads/2017/01/UnityInterface-650x345.png 650w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Here’s the breakdown of the various sections:</div>
<h3 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-003" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.3125rem; letter-spacing: -0.5px; line-height: 1.35; margin: 36px 0px 0px;">
1. Scene View</h3>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The Scene view is where you construct your game; it’s where you add all models, cameras, and other pieces that make up your game. This is a 3D window where you can visually place all the assets you’re using like so:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Build-Scene.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Build Scene" class="aligncenter size-full wp-image-150586" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="324" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Build-Scene.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="600" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
As you test your game in Unity, the scene view will update itself with the current game’s state, and you can even add new elements on-the-fly to the scene. When you stop the game, the scene view will revert to its original state. Any changes you make to the Scene view while you’re playing the game will be lost when it stops.</div>
<h3 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-004" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.3125rem; letter-spacing: -0.5px; line-height: 1.35; margin: 36px 0px 0px;">
2. Game View</h3>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The Game view represents the player’s perspective of game. This where you can play your game and see how all its various mechanics work with one another:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/GameView.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="GameView" class="aligncenter size-full wp-image-150587" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="313" src="https://koenig-media.raywenderlich.com/uploads/2016/11/GameView.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="600" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The Game view has an aspect ratio selector, which lets you change the dimensions of the view to match that of a specific screen aspect ratio (e. g. 4:3, 16:9, 16:10 …) or a device screen size such as that of an iPhone or iPad. This allows you to make sure it looks good on all aspect ratios and resolutions you want to support and that no important content is cut off. You can add a custom aspect ratio using the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Plus</span> button at the bottom of the dropdown.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/GameAspect.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="GameAspect" class="aligncenter size-full wp-image-150588" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="308" sizes="(max-width: 600px) 100vw, 600px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/GameAspect.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/GameAspect.png 600w, https://koenig-media.raywenderlich.com/uploads/2016/11/GameAspect-480x246.png 480w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="600" /></a></div>
<h3 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-005" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.3125rem; letter-spacing: -0.5px; line-height: 1.35; margin: 36px 0px 0px;">
3. Hierarchy window</h3>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The Hierarchy window contains a list of all the current GameObjects being used in your game. But what is a GameObject? That’s an easy one: a GameObject is an object in your game.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
OK, there’s a bit more to them than that! :] In essence, GameObjects are empty containers which you customize through adding components. Components permit GameObjects to project geometry (from a simple cube up to more complex 3d models of towers or monsters), emit light, act as camera or even create complex behavior via scripts.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
GameObjects can also act like folders, containing other GameObjects, which makes them quite useful for organizing your scene. You’ll see GameObjects in action in the second part of this tutorial.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
A scene typically represents a single level of your game, although you could theoretically put the entire game inside one scene. Any GameObjects actively being used in your game in the current scene will appear in the Hierarchy window:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Every new scene starts with a Main Camera and a Directional Light, which are both GameObjects.<br data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit;" />When you delete a GameObject from the Hierarchy, you’re effectively removing it from the scene.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
As your scene grows with lots of GameObjects, the search bar will prove to be an invaluable tool:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Hierachy.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Hierachy" class="aligncenter size-full wp-image-150589" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="381" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Hierachy.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="413" /></a></div>
<h3 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-006" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.3125rem; letter-spacing: -0.5px; line-height: 1.35; margin: 36px 0px 0px;">
4. Project window</h3>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The Project window contains all assets used by your game. You can organize your assets by folders, and when you wish to use them, you can simply drag those assets from the Project window to the Hierarchy window. Alternatively, you can drag them from the Project window to the Scene view. If you drag files from your computer into the Project window then Unity will automatically import those as assets for you.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/AssetFolder.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="AssetFolder" class="aligncenter size-full wp-image-150591" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="472" src="https://koenig-media.raywenderlich.com/uploads/2016/11/AssetFolder.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="368" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Unity organizes the assets in the Project window the same as the OS file system. You may be tempted to make changes directly in the file system instead of in the Project window, but this is a big mistake that will break your assets – and possibly break your game!</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Unity maintains metadata for each asset, so moving assets between folders on the file system breaks the metadata. If you need to make any organizational changes to your assets — especially prefabs — always perform them in the Project window.</div>
<h3 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-007" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.3125rem; letter-spacing: -0.5px; line-height: 1.35; margin: 36px 0px 0px;">
5. Inspector window</h3>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The Inspector window lets you configure any GameObject. When you select a GameObject in the Hierarchy, the Inspector will list all the appropriate components and their properties of that GameObject; for instance, a light will have a color field along with an intensity field. You can also alter values on your GameObjects while the game is being played.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="The Inspector window" class="aligncenter size-full wp-image-151933" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="660" sizes="(max-width: 500px) 100vw, 500px" src="https://koenig-media.raywenderlich.com/uploads/2017/01/inspector_new.png" srcset="https://koenig-media.raywenderlich.com/uploads/2017/01/inspector_new.png 500w, https://koenig-media.raywenderlich.com/uploads/2017/01/inspector_new-242x320.png 242w, https://koenig-media.raywenderlich.com/uploads/2017/01/inspector_new-379x500.png 379w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="500" /></div>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-81940138692512797602019-07-26T20:00:00.000-07:002019-07-26T20:00:00.312-07:00Unity Tutorial - Getting Started<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgF6Tgf7O_30kcRsO1V9rZt3B6NsyiQuh3P99_H4JOJASWVMTJfnmdyjDybIZieb9j-bY_EcBm_5dlK7LpFuYyENgavHSNcJnHJiT1KQY4I7co3Fum5vx2HWIJDB4uMq8rS_Y9gDClsF8u/s1600/unitylogo2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1001" data-original-width="1600" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgF6Tgf7O_30kcRsO1V9rZt3B6NsyiQuh3P99_H4JOJASWVMTJfnmdyjDybIZieb9j-bY_EcBm_5dlK7LpFuYyENgavHSNcJnHJiT1KQY4I7co3Fum5vx2HWIJDB4uMq8rS_Y9gDClsF8u/s640/unitylogo2.jpg" width="640" /></a></div>
<br />
Unity Tutorial - <span data-darkreader-inline-bgcolor="" style="--darkreader-inline-bgcolor: #000000; background-color: #040607; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem;">When I first started looking into iOS game development, Xcode (before SpriteKit) made game development look very challenging. Unity on the other hand had a powerful visual editor and was also capable of publishing to mobile. Looking further, its asset store and fantastic developer community made Unity a very compelling option indeed.</span><br />
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Today it is able to boast more games being made with Unity than any other game technology. And with support for almost 30 platforms including mobile, VR, desktop and console, it’s no longer a great place to start, but the perfect place to start!</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Unity lego" class="aligncenter size-full wp-image-150568" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="500" sizes="(max-width: 323px) 100vw, 323px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/lego-Image-1-323x500.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/lego-Image-1-323x500.png 323w, https://koenig-media.raywenderlich.com/uploads/2016/11/lego-Image-1-206x320.png 206w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="323" /></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
In the excellent original tutorial created by Brian Moakley, he compared Unity to a Lego set. I honestly can’t think of a better analogy. As you will learn here, Unity employs a fantastic modular system to build up scenes and characters in your game. Whether you are just starting out, you can still make a pretty awesome spaceship with the basic lego brick set.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Alternatively, if you are ready to go for the ‘highly sophisticated interlocking brick system’ only for adults, Unity gives you the ability to customize almost any component, such as writing your own shaders or rewriting the networking stacks to suit the needs of your game!</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
This is the first in a series of Unity tutorials designed to get you up to speed; in it, you’ll stick to the spaceport while you familiarize yourself with the engine environment and tools, while subsequent tutorials will focus on the details of each subsystem.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
In this Unity tutorial, you’ll learn the following:</div>
<ul data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; list-style: none; margin: 24px 0px 0px; padding: 0px 0px 0px 24px;">
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; list-style: square; margin-top: 0.5rem;">How to install Unity and what the differences are between the four different versions.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; list-style: square; margin-top: 0.5rem;">What the different views are that make up the Unity interface.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; list-style: square; margin-top: 0.5rem;">How to navigate within the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Scene</span> view.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; list-style: square; margin-top: 0.5rem;">How to add and manipulate <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">GameObjects</span> and their <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Components</span></li>
</ul>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
The first part of the tutorial is all about familiarizing yourself with the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Unity User Interface</span>.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
In the <a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="http://www.raywenderlich.com/110907/unity-tutorial%E2%80%A6started-part-2" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;">second part</a> you will apply this knowledge to create your first game, a small space shooter. You will do so with the help of a fairy god mother that provides all the scripts and some models, so you can focus on the Unity Interface some more.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/GameView.gif" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="GameView" class="aligncenter size-full wp-image-150587" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="313" src="https://koenig-media.raywenderlich.com/uploads/2016/11/GameView.gif" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="600" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
This tutorial is geared for those with little to no Unity experience. Ideally, you should have some programming experience, but if not, don’t sweat it – we’ll walk you through the whole thing! :]</div>
<h2 data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" id="toc-anchor-001" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: Bitter, serif; font-size: 1.6875rem; letter-spacing: -0.5px; line-height: 1.25; margin: 36px 0px 0px;">
Getting Started</h2>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 12px;">
The first step of this tutorial is to <a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://unity3d.com/get-unity" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;">download Unity here</a>. But wait – there are four different versions: Which should you choose?</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity Versions" class="aligncenter size-full wp-image-150570" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="682" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1.png 700w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1-328x320.png 328w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1-513x500.png 513w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1-32x32.png 32w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image1-1-50x50.png 50w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
All versions of Unity make the same engine features available to you. Personal is free (as in beer), Plus costs $35 per seat/month, Pro $125 per seat/month and there is an Enterprise version where your custom needs will dictate the subscription price point.<br data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit;" />The most noticeable difference is that games created with the Personal version have to start with a Unity splash screen, whereas any of the paid versions allow you to either remove the splash screen or create your own custom splash screen masterpiece.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Additionally different tiers of Unity’s services, such as Cloud build and analytics are unlocked at each price point.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Unity has some pretty strict rules about how you can use the Personal edition; before you start writing your next killer Unity app be sure to check out the <a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://unity3d.com/unity/faq" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;" target="_blank">Unity FAQ</a> to see if you’re eligible to use it.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
For the purpose of following the tutorials the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Personal Edition</span> is sufficient, so click the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Free Download</span> button. This will lead to a download page. Simply click on the huge <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Download installer</span> button.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image2.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity download" class="aligncenter size-large wp-image-150574" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="500" sizes="(max-width: 618px) 100vw, 618px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image2-618x500.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image2-618x500.png 618w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image2-396x320.png 396w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image2.png 851w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="618" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Run the installer and follow the instructions on screen, which means clicking <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Continue</span>and accept the license agreement. Wait for the installation to complete then launch Unity; you’ll be prompted to login before you can go any further:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image3.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity login" class="aligncenter size-full wp-image-150576" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="403" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image3.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image3.png 700w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image3-480x276.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image3-650x374.png 650w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
You’ll need to create a free Unity account in order to use the software if you don’t have one already. To create a Unity account, click the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">create one</span> link and fill out the following form:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image4.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity Create ID" class="aligncenter size-large wp-image-150575" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="500" sizes="(max-width: 460px) 100vw, 460px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image4-460x500.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image4-460x500.png 460w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image4-294x320.png 294w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image4.png 784w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="460" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
You’ll have to log in every time you use Unity, but it does offer an offline mode in case you need it.</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Once you’ve created an account, logged into Unity, and confirmed all of your license details, the projects dialog will automatically appear. It allows you to create a new project and looks something like this:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image5.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity Create Project" class="aligncenter size-full wp-image-150577" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="403" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image5.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image5.png 700w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image5-480x276.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image5-650x374.png 650w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></a></div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
Click the <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">New project</span> button; you’ll see the dialog switch to the following:</div>
<div data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<img alt="Create a new project" class="aligncenter size-full wp-image-151930" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" height="403" sizes="(max-width: 700px) 100vw, 700px" src="https://koenig-media.raywenderlich.com/uploads/2016/12/Image6_new-1.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/12/Image6_new-1.png 700w, https://koenig-media.raywenderlich.com/uploads/2016/12/Image6_new-1-480x276.png 480w, https://koenig-media.raywenderlich.com/uploads/2016/12/Image6_new-1-650x374.png 650w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="700" /></div>
<ol data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; background-color: #040607; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-family: "IBM Plex Serif", serif; font-size: 1.0625rem; line-height: 1.58; list-style-image: initial; list-style-position: initial; margin: 24px 0px 0px; padding: 0px 0px 0px 24px;">
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Name your project <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Space Debris</span> and pick a location on your hard drive to save it.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">You’ll notice that you have a few options: 3D or 2D, and a toggle for Unity Analytics. The 2D or 3D options determine the initial configuration of the editor; you can change these settings later if you decide to change your game type. For now, select <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">3D</span>.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">The <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Asset packages</span> button lets you import custom packages into your project. For instance, if you’re making a first person shooter, you may want to import Unity’s first-person controller package.<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
<a data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" href="https://koenig-media.raywenderlich.com/uploads/2016/11/Image7.png" style="--darkreader-inline-bgcolor: transparent; --darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #b1ffcd; background-color: transparent; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; color: #9cffbf; transition: all 0.3s ease-out 0s;"><img alt="Unity Asset Packages" class="aligncenter size-full wp-image-150579" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" height="378" sizes="(max-width: 398px) 100vw, 398px" src="https://koenig-media.raywenderlich.com/uploads/2016/11/Image7.png" srcset="https://koenig-media.raywenderlich.com/uploads/2016/11/Image7.png 398w, https://koenig-media.raywenderlich.com/uploads/2016/11/Image7-337x320.png 337w" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; --darkreader-inline-color: #ffffff; border-color: rgb(84, 83, 81) !important; border-style: none; box-sizing: inherit; color: rgb(255, 255, 246) !important; display: flex; height: auto; margin: 0px auto; max-width: 100%;" width="398" /></a></div>
<div data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-size: 1.0625rem; line-height: 1.58; margin-top: 24px;">
This is simply a convenience feature at the time of project creation; you’re able to import packages at any point during your project’s lifecycle. For this tutorial, you do not need any of the standard assets.</div>
</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Unity Analytics can be left <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Off</span> as we will not be covering it in this tutorial.</li>
<li data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; margin-top: 0.5rem;">Finally click on <span data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #534f4b; --darkreader-inline-border-left: #534f4b; --darkreader-inline-border-right: #534f4b; --darkreader-inline-border-top: #534f4b; border-color: rgb(84, 83, 81) !important; box-sizing: inherit; font-weight: 700;">Create project</span> and Unity will open with your first project.</li>
</ol>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-75984666077679962582019-07-26T19:55:00.001-07:002019-07-26T19:55:31.102-07:00Kotlin - Architecture & Basic Types<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1Z9J8PszWz6KcbJ0F0zCQ4k29tq_PFfNXptieAYPq0_Ekqsetq2odirazFIClX9FdTBZdhEWqicEB9vdycjJT3btwgAVCmnUF7yAmTf6OQMDQyrjKEO6l9NfLafzbbJiytwlk50c_ynQ/s1600/Kotlin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1500" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1Z9J8PszWz6KcbJ0F0zCQ4k29tq_PFfNXptieAYPq0_Ekqsetq2odirazFIClX9FdTBZdhEWqicEB9vdycjJT3btwgAVCmnUF7yAmTf6OQMDQyrjKEO6l9NfLafzbbJiytwlk50c_ynQ/s640/Kotlin.jpg" width="640" /></a></div>
<br />
Kotlin - <span style="font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px; text-align: justify;">Kotlin is a programming language and has its own architecture to allocate memory and produce a quality output to the end user. Following are the different scenarios where Kotlin compiler will work differently, whenever it is targeting different other kind of languages such as Java and JavaScript.</span><br />
<span style="font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px; text-align: justify;"><br /></span>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Kotlin compiler creates a byte code and that byte code can run on the JVM, which is exactly equal to the byte code generated by the Java <span style="box-sizing: border-box; font-weight: 640;">.class</span> file. Whenever two byte coded file runs on the JVM, they can communicate with each other and this is how an interoperable feature is established in Kotlin for Java.</div>
<img alt="Architecture" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" src="https://www.tutorialspoint.com/kotlin/images/architecture.jpg" style="--darkreader-inline-border-bottom: initial; --darkreader-inline-border-left: initial; --darkreader-inline-border-right: initial; --darkreader-inline-border-top: initial; --darkreader-inline-color: #ffffee; border: 0px; box-sizing: border-box; color: #efe8dc; display: block; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; margin-left: auto; margin-right: auto; max-width: 100%; padding-bottom: 4px; vertical-align: middle;" /><div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Whenever Kotlin targets JavaScript, the Kotlin compiler converts the <span style="box-sizing: border-box; font-weight: 640;">.kt</span> file into ES5.1 and generates a compatible code for JavaScript. Kotlin compiler is capable of creating platform basis compatible codes via LLVM.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<br /></div>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Numbers</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The representation of numbers in Kotlin is pretty similar to Java, however, Kotlin does not allow internal conversion of different data types. Following table lists different variable lengths for different numbers.</div>
<table class="table table-bordered" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; --darkreader-inline-color: #ffffee; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; color: #efe8dc; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 20px; max-width: 100%; text-align: center; width: 604px;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><th data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; background: rgb(10, 12, 13); border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: center; vertical-align: top;">Type</th><th data-darkreader-inline-bgcolor="" data-darkreader-inline-bgimage="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-bgimage: initial; --darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; background: rgb(10, 12, 13); border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: center; vertical-align: top;">Size</th></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Double</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">64</td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Float</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">32</td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Long</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">64</td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Int</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">32</td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Short</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">16</td></tr>
<tr style="box-sizing: border-box;"><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Byte</td><td data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" style="--darkreader-inline-border-bottom: #5d5954; --darkreader-inline-border-left: #5d5954; --darkreader-inline-border-right: #5d5954; --darkreader-inline-border-top: #5d5954; border: 1px solid rgb(46, 45, 44); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">8</td></tr>
</tbody></table>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
In the following example, we will see how Kotlin works with different data types. Please enter the following set of code in our coding ground.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val a</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Int</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">10000</span><span class="pln" style="box-sizing: border-box;">
val d</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Double</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">100.00</span><span class="pln" style="box-sizing: border-box;">
val f</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Float</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">100.00f</span><span class="pln" style="box-sizing: border-box;">
val l</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Long</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1000000004</span><span class="pln" style="box-sizing: border-box;">
val s</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Short</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">10</span><span class="pln" style="box-sizing: border-box;">
val b</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Byte</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your Int Value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">a</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">);</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your Double Value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">d</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">);</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your Float Value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">f</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">);</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your Long Value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">l</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">);</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your Short Value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">s</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">);</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your Byte Value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">b</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">);</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
When you run the above piece of code in the coding ground, it will generate the following output in the web console.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">Your Int Value is 10000
Your Double Value is 100.0
Your Float Value is 100.0
Your Long Value is 1000000004
Your Short Value is 10
Your Byte Value is 1
</pre>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Characters</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Kotlin represents character using <span style="box-sizing: border-box; font-weight: 640;">char</span>. Character should be declared in a single quote like <span style="box-sizing: border-box; font-weight: 640;">‘c’</span>. Please enter the following code in our coding ground and see how Kotlin interprets the character variable. Character variable cannot be declared like number variables. Kotlin variable can be declared in two ways - one using <span style="box-sizing: border-box; font-weight: 640;">“var”</span> and another using <span style="box-sizing: border-box; font-weight: 640;">“val”</span>.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val letter</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Char</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// defining a variable </span><span class="pln" style="box-sizing: border-box;">
letter </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">'A'</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// Assigning a value to it </span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"$letter"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above piece of code will yield the following output in the browser output window.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">A
</pre>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Boolean</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Boolean is very simple like other programming languages. We have only two values for Boolean – either true or false. In the following example, we will see how Kotlin interprets Boolean.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val letter</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Boolean</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// defining a variable </span><span class="pln" style="box-sizing: border-box;">
letter </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">true</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// Assinging a value to it </span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Your character value is "</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"$letter"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above piece of code will yield the following output in the browser.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">Your character value is true
</pre>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Strings</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Strings are character arrays. Like Java, they are immutable in nature. We have two kinds of string available in Kotlin - one is called <span style="box-sizing: border-box; font-weight: 640;">raw String</span> and another is called <span style="box-sizing: border-box; font-weight: 640;">escaped String</span>. In the following example, we will make use of these strings.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
</span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">var</span><span class="pln" style="box-sizing: border-box;"> rawString </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"I am Raw String!"</span><span class="pln" style="box-sizing: border-box;">
val escapedString </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"I am escaped String!\n"</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Hello!"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">escapedString</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Hey!!"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">rawString</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above example of escaped String allows to provide extra line space after the first print statement. Following will be the output in the browser.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">Hello!I am escaped String!
Hey!!I am Raw String!
</pre>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Arrays</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Arrays are a collection of homogeneous data. Like Java, Kotlin supports arrays of different data types. In the following example, we will make use of different arrays.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val numbers</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">IntArray</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> intArrayOf</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">3</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">4</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">5</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Hey!! I am array Example"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">numbers</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">[</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">])</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above piece of code yields the following output. The indexing of the array is similar to other programming languages. Here, we are searching for a second index, whose value is “3”.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">Hey!! I am array Example3
</pre>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Collections</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Collection is a very important part of the data structure, which makes the software development easy for engineers. Kotlin has two types of collection - one is <span style="box-sizing: border-box; font-weight: 640;">immutable collection</span> (which means lists, maps and sets that cannot be editable) and another is <span style="box-sizing: border-box; font-weight: 640;">mutable collection</span> (this type of collection is editable). It is very important to keep in mind the type of collection used in your application, as Kotlin system does not represent any specific difference in them.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val numbers</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">MutableList</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Int</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">></span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> mutableListOf</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">3</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">//mutable List </span><span class="pln" style="box-sizing: border-box;">
val readOnlyView</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">List</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Int</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">></span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> numbers </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// immutable list </span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"my mutable list--"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">numbers</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// prints "[1, 2, 3]" </span><span class="pln" style="box-sizing: border-box;">
numbers</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="pln" style="box-sizing: border-box;">add</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">4</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"my mutable list after addition --"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">numbers</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// prints "[1, 2, 3, 4]" </span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">readOnlyView</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
readOnlyView</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="pln" style="box-sizing: border-box;">clear</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">()</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// ⇒ does not compile </span><span class="pln" style="box-sizing: border-box;">
</span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// gives error </span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above piece of code will yield the following output in the browser. It gives an error when we try to clear the mutable list of collection.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">main.kt:9:18: error: unresolved reference: clear
readOnlyView.clear() // -> does not compile
^
</pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
In collection, Kotlin provides some useful methods such as <span style="box-sizing: border-box; font-weight: 640;">first(), last(), filter()</span>, etc. All these methods are self-descriptive and easy to implement. Moreover, Kotlin follows the same structure such as Java while implementing collection. You are free to implement any collection of your choice such as Map and Set.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
In the following example, we have implemented Map and Set using different built-in methods.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val items </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> listOf</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">3</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">4</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"First Element of our list----"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">items</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="pln" style="box-sizing: border-box;">first</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">())</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Last Element of our list----"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">items</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">last</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">())</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"Even Numbers of our List----"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">items</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="pln" style="box-sizing: border-box;">
filter </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;"> it </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">%</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">0</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">})</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// returns [2, 4]</span><span class="pln" style="box-sizing: border-box;">
val readWriteMap </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> hashMapOf</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"foo"</span><span class="pln" style="box-sizing: border-box;"> to </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"bar"</span><span class="pln" style="box-sizing: border-box;"> to </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">readWriteMap</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">[</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"foo"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">])</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// prints "1"</span><span class="pln" style="box-sizing: border-box;">
val strings </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> hashSetOf</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"a"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"b"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"c"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">,</span><span class="pln" style="box-sizing: border-box;"> </span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"c"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"My Set Values are"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">strings</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above piece of code yields the following output in the browser.</div>
<pre class="result notranslate" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #090b0b; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; overflow: auto; padding: 5px; width: 604px;">First Element of our list----1
Last Element of our list----4
Even Numbers of our List----[2, 4]
1
My Set Values are[a, b, c]
</pre>
<h2 data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffff; box-sizing: border-box; color: #fdf7eb; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: normal; left: 0px; letter-spacing: -1px; line-height: 1.5em; margin: 0.2em 0.2em 0.2em 0px; padding: 0px; position: relative; text-shadow: rgb(22, 24, 26) 1px 1px 2px;">
Ranges</h2>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
Ranges is another unique characteristic of Kotlin. Like Haskell, it provides an operator that helps you iterate through a range. Internally, it is implemented using <span style="box-sizing: border-box; font-weight: 640;">rangeTo()</span> and its operator form is <span style="box-sizing: border-box; font-weight: 640;">(..)</span>.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
In the following example, we will see how Kotlin interprets this range operator.</div>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
<i class="fa-external-link" style="box-sizing: border-box;"></i></div>
<pre class="prettyprint notranslate prettyprinted" data-darkreader-inline-bgcolor="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-color="" style="--darkreader-inline-bgcolor: #000000; --darkreader-inline-border-bottom: #5b5853; --darkreader-inline-border-left: #5b5853; --darkreader-inline-border-right: #5b5853; --darkreader-inline-border-top: #5b5853; --darkreader-inline-color: #ffffee; background-color: #0a0c0d; border-radius: 0px; border: 1px solid rgb(47, 46, 45); box-sizing: border-box; color: #efe8dc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 16px; margin-bottom: 10px; margin-top: 15px; overflow: auto; padding: 5px; width: 604px;"><span class="pln" style="box-sizing: border-box;">fun main</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">args</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="pln" style="box-sizing: border-box;"> </span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Array</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;"><</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">String</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">>)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;">
val i</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">:</span><span class="typ" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff96ee; box-sizing: border-box; color: #ff8ae1;">Int</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">=</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">2</span><span class="pln" style="box-sizing: border-box;">
</span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">for</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">j </span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">in</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1.</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">4</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">print</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">j</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// prints "1234"</span><span class="pln" style="box-sizing: border-box;">
</span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">if</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="pln" style="box-sizing: border-box;">i </span><span class="kwd" data-darkreader-inline-color="" style="--darkreader-inline-color: #93d5ff; box-sizing: border-box; color: #85b7ff;">in</span><span class="pln" style="box-sizing: border-box;"> </span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">1.</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">.</span><span class="lit" data-darkreader-inline-color="" style="--darkreader-inline-color: #bcffff; box-sizing: border-box; color: #a4ffff;">10</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;"> </span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">{</span><span class="pln" style="box-sizing: border-box;"> </span><span class="com" data-darkreader-inline-color="" style="--darkreader-inline-color: #ff897f; box-sizing: border-box; color: #ff817c;">// equivalent of 1 < = i && i < = 10</span><span class="pln" style="box-sizing: border-box;">
println</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">(</span><span class="str" data-darkreader-inline-color="" style="--darkreader-inline-color: #9aff89; box-sizing: border-box; color: #89ff81;">"we found your number --"</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">+</span><span class="pln" style="box-sizing: border-box;">i</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">)</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span><span class="pln" style="box-sizing: border-box;">
</span><span class="pun" data-darkreader-inline-color="" style="--darkreader-inline-color: #ffffaa; box-sizing: border-box; color: #ffff9c;">}</span></pre>
<div style="box-sizing: border-box; font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 24px; margin: 0em 0.2em 0.6em; overflow-wrap: break-word; padding: 0px; text-align: justify;">
The above piece of code yields the following output in the browser.</div>
Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-31481990798503166202019-07-26T19:52:00.001-07:002019-07-26T19:52:26.383-07:00Kotlin - Overview<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0dhlnvmR5abZFmyGI9MmFqec3vNtAC_Pb6pylsTe1VfUDU6KHb62l3ZXpHkvo22rcXWuC0QwljHDqlngX9j-8GSjQaoDJrpQh4mDOqcSysArHCHK5FeShaKTUdTaNO47MkXN7k5DIsVqH/s1600/Kotlin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1500" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0dhlnvmR5abZFmyGI9MmFqec3vNtAC_Pb6pylsTe1VfUDU6KHb62l3ZXpHkvo22rcXWuC0QwljHDqlngX9j-8GSjQaoDJrpQh4mDOqcSysArHCHK5FeShaKTUdTaNO47MkXN7k5DIsVqH/s640/Kotlin.jpg" width="640" /></a></div>
<br />
Kotlin - Kotlin is a new open source programming language like Java, JavaScript, etc. It is a high level strongly statically typed language that combines functional and technical part in a same place. Currently, Kotlin targets Java and JavaScript. It runs on JVM.<br />
<br />
Kotlin is influenced by other programming languages such as Java, Scala, Groovy, Gosu, etc. The syntax of Kotlin may not be exactly similar to JAVA, however, internally Kotlin is reliant on the existing Java Class library to produce wonderful results for the programmers. Kotlin provides interoperability, code safety, and clarity to the developers around the world.<br />
<br />
Advantages and Disadvantages<br />
Following are some of the advantages of using Kotlin for your application development.<br />
<br />
Easy Language − Kotlin is a functional language and very easy to learn. The syntax is pretty much similar to Java, hence it is very easy to remember. Kotlin is more expressive, which makes your code more readable and understandable.<br />
<br />
Concise − Kotlin is based on JVM and it is a functional language. Thus, it reduce lots of boiler plate code used in other programming languages.<br />
<br />
Runtime and Performance − Better performance and small runtime.<br />
<br />
Interoperability − Kotlin is mature enough to build an interoperable application in a less complex manner.<br />
<br />
Brand New − Kotlin is a brand new language that gives developers a fresh start. It is not a replacement of Java, though it is developed over JVM. It is accepted as the first official language of android development. Kotlin can be defined as - Kotlin = JAVA + extra updated new features.<br />
<br />
Following are some of the disadvantages of Kotlin.<br />
<br />
Namespace declaration − Kotlin allows developers to declare the functions at the top level. However, whenever the same function is declared in many places of your application, then it is hard to understand which function is being called.<br />
<br />
No Static Declaration − Kotlin does not have usual static handling modifier like Java, which can cause some problem to the conventional Java developer.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-35683117433694924682019-07-26T19:39:00.002-07:002019-07-26T19:39:47.349-07:00React Native - Handling Assets<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native - The final step to complete the search screen of the application is to add the house graphic. Download and unzip the images zip file.<br />
<br />
Next, create a directory in your root project folder named Resources. Place the three images of the house in this directory.<br />
<br />
Drawables: In Android, static app images are typically added to the project’s res/drawable folder. In React Native, however, it’s recommended not to. Placing your image assets alongside your components helps to keep your components self contained, doesn’t require the app to be relaunched if you add new images. It also provides a single place for adding images if you are building for both iOS and Android.<br />
<br />
Back in SearchPage.js, add the following beneath the closing tag of the View component that wraps the text input and button:<br />
<br />
<Image source={require('./Resources/house.png')} style={styles.image}/><br />
<br />
Now, add the image’s corresponding style to the end of the style list:<br />
<br />
image: {<br />
width: 217,<br />
height: 138,<br />
},<br />
<br />
Save your changes and check out your new UI:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_add_house-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_add_house-281x500.png" width="358" /></a></div>
<br />
<br />
You may need to restart the packager on Windows if the image doesn’t show up.<br />
<br />
Your current app looks good, but it’s somewhat lacking in functionality. Your task now is to add some state to your app and perform some actions.<br />
<br />
Adding Component State<br />
A React component can manage its internal state through an object called, you guessed it, state. Whenever a component’s state changes, render() is called.<br />
<br />
Within SearchPage.js, add the following code just before render():<br />
<br />
constructor(props) {<br />
super(props);<br />
this.state = {<br />
searchString: 'london'<br />
};<br />
}<br />
<br />
Your component now has a state variable, with searchString set to an initial value of london.<br />
<br />
Within render(), change TextInput to the following:<br />
<br />
<TextInput<br />
underlineColorAndroid={'transparent'}<br />
style={styles.searchInput}<br />
value={this.state.searchString}<br />
placeholder='Search via name or postcode'/><br />
<br />
This sets the TextInput value property — that is, the text displayed to the user — to the current value of the searchString state variable. This takes care of setting the initial state, but what happens when the user edits this text?<br />
<br />
The first step is to create a method that acts as an event handler. Within the SearchPage class add the following method below the constructor:<br />
<br />
_onSearchTextChanged = (event) => {<br />
console.log('_onSearchTextChanged');<br />
this.setState({ searchString: event.nativeEvent.text });<br />
console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);<br />
};<br />
<br />
This defines a function using the => syntax. This is an arrow function, another recent addition to the JavaScript language that provides a succinct syntax for creating anonymous functions.<br />
<br />
The function takes the value from the native browser event’s text property and uses it to update the component’s state. It also adds some logging code that will make sense shortly.<br />
<br />
Note: JavaScript classes do not have access modifiers, so they have no concept of private. As a result you often see developers prefixing methods with an underscore to indicate that they should be considered private.<br />
<br />
To wire up this method so it gets called when the text changes, return to the TextInput field within the render method and add an onChange property so the tag looks like the following:<br />
<br />
<TextInput<br />
underlineColorAndroid={'transparent'}<br />
style={styles.searchInput}<br />
value={this.state.searchString}<br />
onChange={this._onSearchTextChanged}<br />
placeholder='Search via name or postcode'/><br />
<br />
Whenever the user changes the text, you invoke the function supplied to onChange; in this case, it’s _onSearchTextChanged.<br />
<br />
There’s one final step before you refresh your app again: add the following logging statement to the top of render(), just before return:<br />
<br />
console.log('SearchPage.render');<br />
<br />
Save your changes and return to your emulator. You should see the text input’s initial value set to london:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_input_placeholder-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_input_placeholder-281x500.png" width="358" /></a></div>
<br />
<br />
Run the following in terminal to view the debug logs:<br />
<br />
react-native log-android<br />
<br />
In the emulator, edit the input text. You should see something like this:<br />
<br />
08-01 18:09:02.720 5444 8028 I ReactNativeJS: SearchPage.render<br />
08-01 18:09:33.453 5444 8028 I ReactNativeJS: _onSearchTextChanged<br />
08-01 18:09:33.453 5444 8028 I ReactNativeJS: Current: london, Next: londona<br />
08-01 18:09:33.454 5444 8028 I ReactNativeJS: SearchPage.render<br />
<br />
Looking at the console logs, the order of the logging statement seems a little odd:<br />
<br />
This is the initial call to render() to set up the view.<br />
You invoke _onSearchTextChanged() when the text changes.<br />
You call this.setState() to schedule an update to the component state to reflect the new input text. This triggers another render.<br />
You log the current and the next search text values.<br />
A React component state change triggers a UI update. This de-couples the rendering logic from state changes affecting the UI. Most other UI frameworks put the onus on you to update the UI based on state changes. Alternatively, the updates are done through an implicit link between the state and UI, for example by using Android’s Data Binding Library.<br />
<br />
At this point you’ve probably spotted a fundamental flaw in this concept. Yes, that’s right — performance!<br />
<br />
Surely you can’t just throw away your entire UI and re-build it every time something changes? This is where React gets really smart.<br />
<br />
Each time the UI renders itself, it takes the view tree returned by your render methods, and reconciles — or diffs — it with the current Android UI view. The output of this reconciliation process is a simple list of updates that React needs to apply to the current view. That means only the things that have actually changed will re-render!<br />
<br />
You can wrap your head around all that later; you still have some work to do in the app.<br />
<br />
Initiating a Search<br />
First, remove the logging code you just added above, you’ll no longer need it.<br />
<br />
In order to implement the search functionality you need to handle the Go button press, create a suitable API request, and provide a visual indication that a query is in progress.<br />
<br />
Within SearchPage.js, update the initial state within the constructor:<br />
<br />
this.state = {<br />
searchString: 'london',<br />
isLoading: false,<br />
};<br />
<br />
The new isLoading property will keep track of whether a query is in progress.<br />
<br />
Add the following logic to the start of render:<br />
<br />
const spinner = this.state.isLoading ?<br />
<ActivityIndicator size='large'/> : null;<br />
<br />
This is a ternary if statement that optionally adds an activity indicator, depending on the component’s isLoading state. Because the entire component is rendered each time, you are free to mix JSX and JavaScript logic.<br />
<br />
Within the JSX that defines the search UI in return, add the following line below the Image to place the spinner:<br />
<br />
{spinner}<br />
<br />
Next, add the following methods to the SearchPage class:<br />
<br />
_executeQuery = (query) => {<br />
console.log(query);<br />
this.setState({ isLoading: true });<br />
};<br />
<br />
_onSearchPressed = () => {<br />
const query = urlForQueryAndPage('place_name', this.state.searchString, 1);<br />
this._executeQuery(query);<br />
};<br />
<br />
_executeQuery() will eventually run the query, but for now it simply logs a message to the console and sets isLoading appropriately so the UI can show the new state.<br />
<br />
_onSearchPressed() configures and initiates the search query. This should kick off when the Go button is pressed.<br />
<br />
To accomplish that, go back to the render method and replace the onPress prop for the Go Button as follows:<br />
<br />
onPress={this._onSearchPressed}<br />
<br />
Finally, add the following utility function just above the SearchPage class declaration:<br />
<br />
function urlForQueryAndPage(key, value, pageNumber) {<br />
const data = {<br />
country: 'uk',<br />
pretty: '1',<br />
encoding: 'json',<br />
listing_type: 'buy',<br />
action: 'search_listings',<br />
page: pageNumber,<br />
};<br />
data[key] = value;<br />
<br />
const querystring = Object.keys(data)<br />
.map(key => key + '=' + encodeURIComponent(data[key]))<br />
.join('&');<br />
<br />
return 'https://api.nestoria.co.uk/api?' + querystring;<br />
}<br />
<br />
urlForQueryAndPage doesn’t depend on SearchPage, so it’s implemented as a free function rather than a method. It first creates the query string based on the parameters in data. Then it transforms the data into name=value pairs separated by ampersands. Finally, it calls the Nestoria API to return the property listings.<br />
<br />
Save your changes, head back to the emulator and press Go. You’ll see the activity indicator spin:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_activity_indicator-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_activity_indicator-281x500.png" width="358" /></a></div>
<br />
<br />
In terminal, the debug logs should show something like this:<br />
<br />
08-01 18:14:45.110 5444 8308 I ReactNativeJS: https://api.nestoria.co.uk/api?country=uk&pretty=1&encoding=json&listing_type=buy&action=search_listings&page=1&place_name=london<br />
<br />
Copy and paste that URL into your browser to see the result. You’ll see a massive JSON object. Don’t worry — you don’t need to understand that! You’ll add code to parse that now.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-850495829799153882019-07-26T19:37:00.002-07:002019-07-26T19:37:49.601-07:00React Native Tutorial - Building Search Page<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native - Add a new file named SearchPage.js and place it in the same folder as App.js. Add the following code to this file:<br />
<br />
'use strict';<br />
<br />
import React, { Component } from 'react';<br />
import {<br />
StyleSheet,<br />
Text,<br />
TextInput,<br />
View,<br />
Button,<br />
ActivityIndicator,<br />
Image,<br />
} from 'react-native';<br />
<br />
This imports the modules you’ll need to build the UI.<br />
<br />
Add the following Component subclass after the import statements:<br />
<br />
type Props = {};<br />
export default class SearchPage extends Component<Props> {<br />
static navigationOptions = {<br />
title: 'Property Finder',<br />
};<br />
<br />
render() {<br />
return (<br />
<View style={styles.container}><br />
<Text style={styles.description}><br />
Search for houses to buy!<br />
</Text><br />
<Text style={styles.description}><br />
Search by place-name or postcode.<br />
</Text><br />
</View><br />
);<br />
}<br />
}<br />
<br />
render is a great demonstration of JSX and the structure it provides. Along with the style, you can very easily visualize the UI constructed by this component: a container with two text labels.<br />
<br />
Now, add the following style code at the bottom of the file:<br />
<br />
const styles = StyleSheet.create({<br />
description: {<br />
marginBottom: 20,<br />
fontSize: 18,<br />
textAlign: 'center',<br />
color: '#656565'<br />
},<br />
container: {<br />
padding: 30,<br />
marginTop: 65,<br />
alignItems: 'center'<br />
},<br />
});<br />
<br />
Again, these are standard CSS properties. Setting up styles like this is less visual than using Android Studio’s layout design editor, but it’s better than setting view properties one by one in your onCreate() methods! :]<br />
<br />
Save your changes.<br />
<br />
Open App.js and add the following just after the current import statements near the top of the file:<br />
<br />
import SearchPage from './SearchPage';<br />
<br />
This imports SearchPage from the file you just created.<br />
<br />
Remove the SearchPage class and its associated description style from App.js. You won’t be needing that code any longer. This may also be a good time to get rid of the all unused imports: those from react and react-native.<br />
<br />
Save your changes and return to the emulator to check out the new UI:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_build_search_page-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_build_search_page-281x500.png" width="358" /></a></div>
<br />
<br />
Styling with Flexbox<br />
So far, you’ve seen basic CSS properties that deal with margins, paddings and color. However, you might not be familiar with Flexbox, a more recent addition to the CSS specification that’s useful for handling complex layout across different screen sizes.<br />
<br />
React Native uses the Yoga library under the hood to drive layout. Yoga is a C implementation of Flexbox and it includes bindings for Java (for Android), Swift, Objective-C, and C# (for .NET).<br />
<br />
Generally you use a combination of Yoga’s flexDirection, alignItems, and justifyContent properties to manage your layout.<br />
<br />
So far, your layout has a container with two children arranged vertically:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/style_flex_stack-e1511737042232.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="143" data-original-width="238" height="192" src="https://koenig-media.raywenderlich.com/uploads/2017/11/style_flex_stack-e1511737042232.png" width="320" /></a></div>
<br />
<br />
This is due to the default flexDirection value of column being active. flexDirection helps define the main axis and cross axis. Your container’s main axis is vertical. It’s cross axis is therefore horizontal.<br />
<br />
alignItems determines the placement of children in the cross axis. Your app has set this value to center. This means the children are center-aligned.<br />
<br />
You’re going to see some other layout options at play.<br />
<br />
Open SearchPage.js and insert the following just after the closing tag of the second Text element:<br />
<br />
<View style={styles.flowRight}><br />
<TextInput<br />
underlineColorAndroid={'transparent'}<br />
style={styles.searchInput}<br />
placeholder='Search via name or postcode'/><br />
<Button<br />
onPress={() => {}}<br />
color='#48BBEC'<br />
title='Go'<br />
/><br />
</View><br />
<br />
You’ve added a view that holds a text input and a button.<br />
<br />
In your styles definition, add the following new styles below the container style:<br />
<br />
flowRight: {<br />
flexDirection: 'row',<br />
alignItems: 'center',<br />
alignSelf: 'stretch',<br />
},<br />
searchInput: {<br />
height: 36,<br />
padding: 4,<br />
marginRight: 5,<br />
flexGrow: 1,<br />
fontSize: 18,<br />
borderWidth: 1,<br />
borderColor: '#48BBEC',<br />
borderRadius: 8,<br />
color: '#48BBEC',<br />
},<br />
<br />
These set the placement of the text input and button.<br />
<br />
Save your changes and check the emulator to see your updates:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_add_search_input_button-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_add_search_input_button-281x500.png" width="358" /></a></div>
<br />
<br />
The text field and Go button are on the same row, so you’ve wrapped them in a container view using the flowRight style which uses flexDirection: 'row' to horizontally place the items in a row.<br />
<br />
You’ve also added a flexGrow: 1 style to the text input. Yoga first lays out the text input and button according to their sizes. It then distributes the remaining space according to the flexGrow values. The text input therefore takes over the remaining space.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-17773780196871556932019-07-26T19:34:00.004-07:002019-07-26T19:34:59.953-07:00React Native Tutotial - Using JSX<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native Tutotial - Your current application uses React.createElement to construct the simple UI for your application, which React turns into the native equivalent. While your JavaScript code is perfectly readable in its present form, a more complex UI with nested elements would rapidly become quite a mess.<br />
<br />
Make sure the app is still running, then return to your text editor to edit App.js. Modify the body of render to be the following:<br />
<br />
return <Text style={styles.description}>Search for houses to buy! (Again)</Text>;<br />
<br />
This is JSX, or JavaScript syntax extension, which mixes HTML-like syntax directly in your JavaScript code; if you’re already a web developer, this should feel rather familiar. You’ll use JSX throughout this article.<br />
<br />
Save your changes to App.js and return to the emulator. Tap R twice, and you’ll see your application refresh to display the updated message:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_jsx-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_jsx-281x500.png" width="358" /></a></div>
<br />
<br />
Re-running a React Native application is really as simple as refreshing a web browser! :] Note that this will only reflect changes made to your JavaScript files – native code or resource changes will require you to restart the packager.<br />
<br />
You can even skip having to refresh the app by enabling live reload. Press Cmd+m for Mac or Ctrl+m for Windows/Linux in the emulator then select Enable Live Reload:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_enable_live_reload-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_enable_live_reload-281x500.png" width="358" /></a></div>
<br />
<br />
In App.js, modify the render method’s body to the following:<br />
<br />
return <Text style={styles.description}>Search for houses to buy!</Text>;<br />
<br />
Save your changes. Note that the emulator automatically refreshes to reflect your changes:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_live_reload_test-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_live_reload_test-281x500.png" width="358" /></a></div>
<br />
<br />
Adding Navigation<br />
React Navigation is a community effort led by Facebook and Expo to provide an easy-to-use navigation solution for React Native apps. It’s a JavaScript implementation which means that it works across iOS and Android. You’ll be working with this library in this tutorial.<br />
<br />
There are other native navigation solutions out there including AirBnB’s Native Navigation and React Native Navigation from Wix. Be sure to check out the alternatives if you’re looking for a more native look and feel for your future app.<br />
<br />
Install React Navigation by running the following in terminal:<br />
<br />
yarn add react-navigation<br />
<br />
You’re now ready to use its navigation components.<br />
<br />
In App.js, add the following after the import statements near the top:<br />
<br />
import {<br />
createStackNavigator,<br />
} from 'react-navigation';<br />
<br />
createStackNavigator enables your app to transition from one screen to another with the new screen being placed on top of a stack.<br />
<br />
Next, replace the App class definition with the following:<br />
<br />
class SearchPage extends Component<Props> {<br />
<br />
Next, add the following to SearchPage just before render():<br />
<br />
static navigationOptions = {<br />
title: 'Property Finder',<br />
};<br />
<br />
This sets the title in the navigation bar for this screen.<br />
<br />
Add the following below the SearchPage component:<br />
<br />
const App = createStackNavigator({<br />
Home: { screen: SearchPage },<br />
});<br />
export default App;<br />
<br />
This configures the SearchPage component as the initial component in the navigation stack.<br />
<br />
Save your changes and check the emulator to see the updated UI:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_add_navigation-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_add_navigation-281x500.png" width="358" /></a></div>
<br />
<br />
Excellent — you now have the basic navigation structure in place.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-57810718036250298752019-07-26T19:32:00.002-07:002019-07-26T19:32:51.220-07:00React Native Tutorial - Basics<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native - In this section, you’ll learn React Native basics as you begin working on PropertyFinder.<br />
<br />
Open App.js in your text editor of choice and take a look at the structure of the code in the file:<br />
<br />
import React, { Component } from 'react'; // 1<br />
import {Platform, StyleSheet, Text, View} from 'react-native';<br />
<br />
const instructions = Platform.select({ ... }); // 2<br />
<br />
type Props = {};<br />
export default class App extends Component<Props> { ... } // 3<br />
<br />
const styles = StyleSheet.create({ ... }); // 4<br />
<br />
Let’s go through the code step-by-step:<br />
<br />
Imports the required modules.<br />
Sets up a platform-specific display message.<br />
Defines the component that represents the UI.<br />
Creates a style object that controls the component’s layout and appearance.<br />
Take a closer look at this import statement:<br />
<br />
import React, { Component } from 'react';<br />
<br />
This uses the ECMAScript 6 (ES6) import syntax to load the react module and assign it to a variable called React. This is roughly equivalent to importing libraries in Android. It also uses what’s called a destructuring assignment to bring in the Component object. Destructuring lets you extract multiple object properties and assign them to variables using a single statement.<br />
<br />
Note: For more information about ES6 modules I’d recommend reading this blog post by Dr. Axel Rauschmayer.<br />
ES6 is a much nicer way to write JavaScript, supporting features like default parameters, classes, arrow functions, and destructuring assignments. Not all browsers support ES6. React Native uses a tool called Babel to automatically translate modern JavaScript into compatible legacy JavaScript where necessary.<br />
<br />
Back to App.js, check out the class definition:<br />
<br />
export default class App extends Component<Props><br />
<br />
This defines a class which extends a React Component. The export default class modifier makes the class “public”, allowing it to be used in other files.<br />
<br />
Open index.js and take a look at the entry point file:<br />
<br />
import {AppRegistry} from 'react-native';<br />
import App from './App';<br />
import {name as appName} from './app.json';<br />
<br />
AppRegistry.registerComponent(appName, () => App);<br />
<br />
This registers the imported component that serves as the app’s entry point.<br />
<br />
It’s time to start building your app.<br />
<br />
In App.js, add the following at the top of the file, just before the import statements:<br />
<br />
'use strict';<br />
<br />
This enables Strict Mode, which adds improved error handling and disables some less-than-ideal JavaScript language features. In simple terms, it makes JavaScript better!<br />
<br />
Inside the App class replace render() with the following:<br />
<br />
render() {<br />
return React.createElement(Text, {style: styles.description}, "Search for houses to buy!");<br />
}<br />
<br />
App extends React.Component, the basic building block of the React UI. Components contain immutable properties, mutable state variables and expose a method for rendering. Your current application is quite simple and only requires a render method.<br />
<br />
React Native components are not Android view classes; instead they are a lightweight equivalent. The framework takes care of transforming the tree of React components into the required native UI.<br />
<br />
Next, replace the const styles statement with the following:<br />
<br />
const styles = StyleSheet.create({<br />
description: {<br />
fontSize: 18,<br />
textAlign: 'center',<br />
color: '#656565',<br />
marginTop: 65,<br />
},<br />
});<br />
<br />
This defines a single style that you’ve applied to the description text. If you’ve done any web development before, you’ll probably recognize those property names. The React Native StyleSheet class used to style the application UI is similar to the Cascading Style Sheets (CSS) used on the Web.<br />
<br />
Then, get rid of the instructions assignment code block as you no longer need it.<br />
<br />
Save your changes to App.js and return to the emulator. Double tap R on your keyboard, and you’ll see your fledgling property search app starting to take shape:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_search_text-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_search_text-281x500.png" width="358" /></a></div>
<br />
<br />
That’s a JavaScript application running in the emulator, rendering a native UI, without a browser in sight!<br />
<br />
Still don’t trust me? :] Verify it for yourself: within Android Studio, select Tools\Android\Layout Inspector. Then check Show All Proceses, select com.propertyfinder and tap OK to inspect the view hierarchy:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/as_select_process-207x320.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="320" data-original-width="207" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/as_select_process-207x320.png" width="414" /></a></div>
<br />
<br />
You will see no WebView instances anywhere! Your text is being displayed in a view called ReactTextView:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/as_layout_inspector-480x164.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="164" data-original-width="480" height="218" src="https://koenig-media.raywenderlich.com/uploads/2017/11/as_layout_inspector-480x164.png" width="640" /></a></div>
<br />
<br />
But what is that? Go to the project file finder and enter ReactTextView.java in the prompt. Select the result matching this file to view the source code. Notice ReactTextView inherits directly from TextView. Neat!<br />
<br />
Curious as to how it all works? Take a quick look at MainActivity.java and MainApplication.java which you can find in android/app/src/main/java/com/propertyfinder.<br />
<br />
MainApplication sets up a ReactNativeHost which in turn creates a ReactInstanceManager. The instance manager handles the communication between JavaScript and native Android.<br />
<br />
MainActivity extends ReactActivity which creates a ReactRootView when launched. ReactRootView uses the instance manager to start the JavaScript application. It also renders the App component to set the Activity’s content view.<br />
<br />
The terminal window that was opened when you ran this application started a packager and server that allows your JavaScript code to be fetched, by default on port 8081. For example:<br />
<br />
http://localhost:8081/index.bundle?platform=android<br />
<br />
Open this URL in your browser; you’ll see the JavaScript code for your app. You can find your “Search for houses to buy!” description code embedded among the React Native framework.<br />
<br />
When your app starts, this code is loaded and executed by the JavaScriptCore library. In the case of your application, it loads the App component, then constructs the native Android view.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-42750383077767820472019-07-26T19:29:00.000-07:002019-07-26T19:29:11.599-07:00React Native Tutorial - Getting Started<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZ65MwvXhJWUsr0pL-nudVX2dOiPvtAFIVCUW1dnSnFO90Q6HPR_TGhyphenhyphenbIRkSTzPgek5ldS93c4vtxFap4FlTWisi7HSWEuGBqwGnuEf38gPZG2W7TvMC2D5MFEAaXPqCDVXdJ_rWVAtg/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native - React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. React Native also requires a recent version of the Java SE Development Kit (JDK) to run on Android. Follow the instructions for your system to make sure you install the required versions.<br />
<br />
MacOS<br />
<br />
First install Homebrew using the instructions on the Homebrew website. Then install Node.js by executing the following in Terminal:<br />
<br />
brew install node<br />
<br />
Next, use homebrew to install watchman, a file watcher from Facebook:<br />
<br />
brew install watchman<br />
<br />
This is used by React Native to figure out when your code changes and rebuild accordingly. It’s like having Android Studio do a build each time you save your file.<br />
<br />
Finally, download and install JDK 8 or newer if needed.<br />
<br />
Windows<br />
<br />
First install Chocolatey using the instructions on the Chocolatey website.<br />
<br />
Install Node.js if you don’t have it or have a version older than 4. Run the following command as Administrator (Right-click on Command Prompt and select “Run as Administrator”):<br />
<br />
choco install -y nodejs.install<br />
<br />
Python is needed to run the React Native build scripts. Run the following command as Administrator if you don’t have Python 2:<br />
<br />
choco install -y python2<br />
<br />
Run the following command as Administrator if you don’t have a JDK or have a version older than 8:<br />
<br />
choco install -y jdk8<br />
<br />
Linux<br />
<br />
Install Node.js by following the installation instructions for your Linux distribution. You will want to install Node.js version 6 or newer.<br />
<br />
Finally, download and install JDK 8 or newer if needed.<br />
<br />
React Native CLI<br />
Use Node Package Manager (or npm) to install the React Native Command Line Interface (CLI) tool. In your terminal (Terminal or Command Prompt or shell) type:<br />
<br />
npm install -g react-native-cli<br />
<br />
npm fetches the CLI tool and installs it globally; npm is similar in function to JCenter and is packaged with Node.js.<br />
<br />
Next, install Yarn using the instructions on the Yarn website. Yarn is a fast npm client.<br />
<br />
Android Development Environment<br />
Set up your Android development environment, if haven’t done so. Make sure you can successfully run an Android app on an emulator.<br />
<br />
React Native requires Android 6.0 (Marshmallow). In Android Studio, go to Tools\Android\SDK Manager. Select SDK Platforms and check Show Package Details. Make sure that the following items are checked:<br />
<br />
Google APIs, Android 23<br />
Android SDK Platform 23<br />
Intel x86 Atom_64 System Image<br />
Google APIs Intel x86 Atom_64 System Image<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/as_sdk_platforms.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="457" data-original-width="720" height="406" src="https://koenig-media.raywenderlich.com/uploads/2017/11/as_sdk_platforms.png" width="640" /></a></div>
<br />
Next, select SDK Tools and check Show Package Details. Expand Android SDK Build-Tools and make sure 23.0.1 is selected.<br />
<br />
Finally, tap Apply to install your selections.<br />
<br />
When the Android components are finished installing, create a new emulator running SDK Platform 23.<br />
<br />
Create the Starter App<br />
Navigate to the folder where you would like to develop your app and run the following in your terminal:<br />
<br />
react-native init PropertyFinder<br />
<br />
This uses the CLI tool to create a starter project containing everything you need to build and run a React Native app.<br />
<br />
In a terminal, run:<br />
<br />
cd PropertyFinder<br />
<br />
In the created folders and files you will find a few items of note:<br />
<br />
node_modules is a folder which contains the React Native framework<br />
index.js is the entry point created by the CLI tool<br />
App.js is the skeletal app created by the CLI tool<br />
android is a folder containing an Android project and the code required to bootstrap your application<br />
ios is a folder containing iOS-related code, which you won’t be touching in this tutorial.<br />
Start your Android emulator running SDK 23 if it isn’t running.<br />
<br />
Run the following command in a terminal:<br />
<br />
react-native run-android<br />
<br />
The emulator will display the following:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_starter-281x500.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="500" data-original-width="281" height="640" src="https://koenig-media.raywenderlich.com/uploads/2017/11/emulator_starter-281x500.png" width="356" /></a></div>
<br />
<br />
If you receive an error related to “SDK location not found”, then perform the following steps:<br />
<br />
Go to the android/ directory of your react-native project<br />
Create a file called local.properties with this line:<br />
sdk.dir = {PATH TO ANDROID SDK}<br />
<br />
For example, on macOS, the SDK path will look something like /Users/USERNAME/Library/Android/sdk.<br />
<br />
You might also have noticed that a terminal window has popped up, displaying something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/terminal_metro-480x308.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="308" data-original-width="480" height="410" src="https://koenig-media.raywenderlich.com/uploads/2017/11/terminal_metro-480x308.png" width="640" /></a></div>
<br />
This is Metro Bundler, the React Native JavaScript bundler running under Node.js. You’ll find out what it does shortly.<br />
<br />
Don’t close the terminal window; just keep it running in the background. If you do close it by mistake, simply run the following in terminal:<br />
<br />
react-native start<br />
<br />
Note: You’ll be mostly writing JavaScript code for this React Native tutorial so no need to use Android Studio as your editor. I use Sublime Text, which is a cheap and versatile editor, but Atom, Brackets or any other lightweight editor will do the job.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-57862626744815458662019-07-26T19:26:00.003-07:002019-07-26T19:26:53.123-07:00React Native Tutorial - Introduction<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-8EG9ueDMjcJa8sMKVQ3-nHkDFBoplAU_BOM8AVbkUPWZZ-7z2BR4CC2Mgib0hOKh-dqIpIrNmYWT3ylLGqcEJeGV4B2ClXZwjY4HJw-wlk1FMKzqTn2IMb6tvesTMmaAY9EXt74jZeue/s1600/all-about-react-native-apps-776x415.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="776" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-8EG9ueDMjcJa8sMKVQ3-nHkDFBoplAU_BOM8AVbkUPWZZ-7z2BR4CC2Mgib0hOKh-dqIpIrNmYWT3ylLGqcEJeGV4B2ClXZwjY4HJw-wlk1FMKzqTn2IMb6tvesTMmaAY9EXt74jZeue/s640/all-about-react-native-apps-776x415.png" width="640" /></a></div>
<br />
React Native - What makes React Native different from other frameworks such as PhoneGap (Apache Cordova) or Appcelerator Titanium, that use JavaScript to create iOS apps?<br />
<br />
(Unlike PhoneGap) with React Native your code may be written in JavaScript but the app’s UI is fully native. It doesn’t have the drawbacks typically associated with a hybrid HTML5 app.<br />
Additionally (unlike Titanium), React introduces a novel, radical and highly functional approach to constructing user interfaces. Your UI is simply a function of the current app state.<br />
React Native brings the React paradigm to mobile app development. It’s goal isn’t to write the code once and run it on any platform. The goal is to learn-once (the React way) and write-anywhere. An important distinction to make.<br />
<br />
The community has even added tools such as Expo and Create React Native App to help you quickly build React Native apps without having to touch Xcode or Android Studio!<br />
<br />
While you can write React Native apps for iOS and Android, this tutorial only covers Android. You can also check out our tutorial focused on React Native for iOS.<br />
<br />
The tutorial takes you through the process of building an Android app for searching UK property listings:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://koenig-media.raywenderlich.com/uploads/2017/11/app_overview-650x330.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="330" data-original-width="650" height="324" src="https://koenig-media.raywenderlich.com/uploads/2017/11/app_overview-650x330.png" width="640" /></a></div>
<br />
Don’t worry if you’ve never written any JavaScript or used the CSS-like properties you’ll see. This tutorial will guide you through every step and provide resources where you can learn more.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-37543514879765022702019-07-26T19:21:00.002-07:002019-07-26T20:11:43.903-07:00Laravel Tutorial - Submiting Form<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s1600/laravel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="808" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s640/laravel.jpg" width="640" /></a></div>
<br />
Laravel - With the form in place, we are ready to handle the POST data and validate data. Back in the routes/web.php file, create another route for the POST request:<br />
<br />
use Illuminate\Http\Request;<br />
<br />
Route::post('/submit', function (Request $request) {<br />
$data = $request->validate([<br />
'title' => 'required|max:255',<br />
'url' => 'required|url|max:255',<br />
'description' => 'required|max:255',<br />
]);<br />
<br />
$link = tap(new App\Link($data))->save();<br />
<br />
return redirect('/');<br />
});<br />
This route is a little more complicated than the others.<br />
<br />
First, we are injecting the Illuminate\Http\Request object, which holds the POST data and other data about the request.<br />
<br />
Next, we use the request’s validate() method to validate the form data. The validate method was introduced in Laravel 5.5 and is a nice shortcut over other methods used for validation. As a bonus, the validated fields are returned to the $data variable, and we can use them to populate our model.<br />
<br />
We require all three fields, and using the pipe character; we can define multiple rules. All three rules can have a max of 255 characters, and the url field requires a valid URL.<br />
<br />
If validation fails, an exception is thrown, and the route returns the user with the original input data and validation errors.<br />
<br />
Next, we use the tap() helper function to create a new Link model instance and then save it. Using tap allows us to call save() and still return the model instance after the save.<br />
<br />
Typically, you would have to do the following without tap, it just adds a little syntactic sugar:<br />
<br />
$link = new \App\Link($data);<br />
$link->save();<br />
<br />
return $link;<br />
If we want to populate a new model with data, we need to allow the fields to be “fillable” via mass assignment. The fillable property is designed to prevent fields from being mass-assigned except for the items you define in the array.<br />
<br />
In our case, we are validating each field so allowing them to be mass-assigned is safe. To allow our model to assign values to these fields, open the app/Link.php file and update it to look like the following:<br />
<br />
<?php<br />
<br />
namespace App;<br />
<br />
use Illuminate\Database\Eloquent\Model;<br />
<br />
class Link extends Model<br />
{<br />
protected $fillable = [<br />
'title',<br />
'url',<br />
'description'<br />
];<br />
}<br />
If we wanted to prevent mass-assignment, this is how our code would look:<br />
<br />
$data = $request->validate([<br />
'title' => 'required|max:255',<br />
'url' => 'required|url|max:255',<br />
'description' => 'required|max:255',<br />
]);<br />
<br />
$link = new \App\Link;<br />
$link->title = $data['title'];<br />
$link->url = $data['url'];<br />
$link->description = $data['description'];<br />
<br />
// Save the model<br />
$link->save();<br />
The last thing we do in our POST route redirects the user back to the home page after saving the link successfully.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-17323547589885617742019-07-26T19:20:00.002-07:002019-07-26T19:20:32.310-07:00Laravel Tutorial - Displaying Link<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s1600/laravel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="808" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s640/laravel.jpg" width="640" /></a></div>
<br />
Laravel - We are almost done creating our first application in Laravel. We will round out this Laravel tutorial with the ability for others to submit links into the app, which requires three fields: title, URL, and a description.<br />
<br />
I am a visual person, and before planning out features requiring HTML, I like to draw them out so I can get an idea of what I’m building in my head. Here is a simple drawing of this form:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://i1.wp.com/wp.laravel-news.com/wp-content/uploads/2016/03/form-drawing.jpg?resize=768%2C857" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="717" height="640" src="https://i1.wp.com/wp.laravel-news.com/wp-content/uploads/2016/03/form-drawing.jpg?resize=768%2C857" width="572" /></a></div>
<br />
<br />
Since we’ve added all the core structure, model factory, migration, and model, in the last section, we can reap the benefits by reusing all those for this section.<br />
<br />
First, create a new route in the routes/web.php file:<br />
<br />
Route::get('/submit', function () {<br />
return view('submit');<br />
});<br />
Next, we need to create the submit.blade.php template at resources/views/submit.blade.php with the following boilerplate bootstrap markup:<br />
<br />
@extends('layouts.app')<br />
@section('content')<br />
<div class="container"><br />
<div class="row"><br />
<h1>Submit a link</h1><br />
<form action="/submit" method="post"><br />
@if ($errors->any())<br />
<div class="alert alert-danger" role="alert"><br />
Please fix the following errors<br />
</div><br />
@endif<br />
<br />
{!! csrf_field() !!}<br />
<div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}"><br />
<label for="title">Title</label><br />
<input type="text" class="form-control" id="title" name="title" placeholder="Title" value="{{ old('title') }}"><br />
@if($errors->has('title'))<br />
<span class="help-block">{{ $errors->first('title') }}</span><br />
@endif<br />
</div><br />
<div class="form-group{{ $errors->has('url') ? ' has-error' : '' }}"><br />
<label for="url">Url</label><br />
<input type="text" class="form-control" id="url" name="url" placeholder="URL" value="{{ old('url') }}"><br />
@if($errors->has('url'))<br />
<span class="help-block">{{ $errors->first('url') }}</span><br />
@endif<br />
</div><br />
<div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}"><br />
<label for="description">Description</label><br />
<textarea class="form-control" id="description" name="description" placeholder="description">{{ old('description') }}</textarea><br />
@if($errors->has('description'))<br />
<span class="help-block">{{ $errors->first('description') }}</span><br />
@endif<br />
</div><br />
<button type="submit" class="btn btn-default">Submit</button><br />
</form><br />
</div><br />
</div><br />
@endsection<br />
<br />
There’s quite a bit going on in this form, so let’s go over the major points that might be confusing when you are new to Laravel.<br />
<br />
Near the top of the form, we have a blade conditional that checks to see if there are any validation errors. When errors exist, the bootstrap alert message will be shown, prompting the user to fix the invalid form fields:<br />
<br />
@if ($errors->any())<br />
<div class="alert alert-danger" role="alert"><br />
Please fix the following errors<br />
</div><br />
@endif<br />
Each individual form field checks for validation errors and displays an error message and outputs a has-error class:<br />
<br />
<div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}"><br />
<label for="title">Title</label><br />
<input type="text" class="form-control" id="title" name="title" placeholder="Title" value="{{ old('title') }}"><br />
@if($errors->has('title'))<br />
<span class="help-block">{{ $errors->first('title') }}</span><br />
@endif<br />
</div><br />
If the user submits invalid data, the route will store validation in the session and redirect the user back to the form. The {{ old('title') }} function will populate the originally submitted data. If a user forgot to submit one of the fields, the other fields that have data would be populated after validation fails and errors are shown.<br />
<br />
If a field has an error, the first() method returns the first error for a given field:<br />
<br />
{{ $errors->first('title') }}Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-2749406915796259712019-07-26T19:19:00.001-07:002019-07-26T19:19:17.136-07:00Laravel Tutorial - Building List<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s1600/laravel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="808" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s640/laravel.jpg" width="640" /></a></div>
<br />
Laravel - If you start thinking about the whole finished project, it’s easy to get overwhelmed. The best way to fight this is to break everything down into small tasks. So, let’s start by showing a list of links.<br />
<br />
Even though showing a list of links sounds like a small task it still requires a database, a database table, data in the table, a database query, and a view file.<br />
<br />
Creating a migration will be the first step, and the Laravel Artisan command line tool can help us build that.<br />
<br />
php artisan make:migration create_links_table --create=links<br />
Now, open the file this command created. It will be located at database/migrations/{{datetime}}_create_links_table.php.<br />
<br />
Inside the up method add our new columns:<br />
<br />
Schema::create('links', function (Blueprint $table) {<br />
$table->increments('id');<br />
$table->string('title');<br />
$table->string('url')->unique();<br />
$table->text('description');<br />
$table->timestamps();<br />
});<br />
<br />
Save the file and run the migration:<br />
<br />
php artisan migrate<br />
While you are working with test data, you can quickly apply the schema:<br />
<br />
php artisan migrate:fresh<br />
Next, we need some data and a model to work with our database table. Laravel provides two features which help with this: the first is a database seeder, which populates the database with data, and second, the model factory files that allow us to generate fake model data that we can use to fill our development database and tests:<br />
<br />
php artisan make:model --factory Link<br />
The --factory flag will generate a new factory file in the database/factories path, in our case a new LinkFactory file will include an empty factory definition for our Link model.<br />
<br />
Open the LinkFactory.php file and fill in the following:<br />
<br />
<?php<br />
<br />
use Faker\Generator as Faker;<br />
<br />
/* @var Illuminate\Database\Eloquent\Factory $factory */<br />
<br />
$factory->define(App\Link::class, function (Faker $faker) {<br />
return [<br />
'title' => substr($faker->sentence(2), 0, -1),<br />
'url' => $faker->url,<br />
'description' => $faker->paragraph,<br />
];<br />
});<br />
<br />
We use the $faker->sentence() method to generate a title, and substr to remove the period at the end of the sentence.<br />
<br />
Next, create the link seeder, so we can easily add demo data to the table:<br />
<br />
php artisan make:seeder LinksTableSeeder<br />
The make:seeder command generates a new database seeder class to seed our links table. Open the database/seeds/LinksTableSeeder.php file and add the following:<br />
<br />
public function run()<br />
{<br />
factory(App\Link::class, 5)->create();<br />
}<br />
<br />
In order to “activate” the LinksTableSeeder, we need to call it from the main database/seeds/DatabaseSeeder.php run method:<br />
<br />
public function run()<br />
{<br />
$this->call(LinksTableSeeder::class);<br />
}<br />
<br />
You can now run the migrations and seeds to add data to the table automatically. Using the migrate:fresh command, we can get a clean schema that applies all migrations and then seeds the database:<br />
<br />
$ php artisan migrate:fresh --seed<br />
Dropped all tables successfully.<br />
Migration table created successfully.<br />
Migrating: 2014_10_12_000000_create_users_table<br />
Migrated: 2014_10_12_000000_create_users_table<br />
Migrating: 2014_10_12_100000_create_password_resets_table<br />
Migrated: 2014_10_12_100000_create_password_resets_table<br />
Migrating: 2017_11_03_023418_create_links_table<br />
Migrated: 2017_11_03_023418_create_links_table<br />
Seeding: LinksTableSeeder<br />
<br />
Using the tinker shell you can start playing around with the model data:<br />
<br />
>>> \App\Link::first();<br />
=> App\Link {#747<br />
id: 1,<br />
title: "Aliquam quo pariatur",<br />
url: "https://gibson.com/consequuntur-consequatur-eius-expedita-maiores-quaerat-occaecati.html",<br />
description: "Temporibus eaque aspernatur...",<br />
created_at: "2017-11-04 05:35:45",<br />
updated_at: "2017-11-04 05:35:45",<br />
}<br />
>>><br />
<br />
We have the data place and a model to interact with the database. We are now ready to start building the UI to add new links to the application.<br />
<br />
Routing and Views<br />
To build out a view showing the list of links, we need to update the main project route and also define a new route that will display our submission form. We can add new routes to our application in the routes/web.php file.<br />
<br />
In the web routes file you should see the default route below:<br />
<br />
Route::get('/', function () {<br />
return view('welcome');<br />
});<br />
<br />
To create a new route we can either use a route closure or a dedicated controller class. In this tutorial, we will use closures for our submission and index routes.<br />
<br />
First, let’s update the home route by getting a collection of links from the database and passing them to the view:<br />
<br />
Route::get('/', function () {<br />
$links = \App\Link::all();<br />
<br />
return view('welcome', ['links' => $links]);<br />
});<br />
<br />
The second argument can be an associative array of data, and the key ends up being the variable name in the template file.<br />
<br />
You can also use a fluent API to define variables if you prefer:<br />
<br />
// with()<br />
return view('welcome')->with('links', $links);<br />
<br />
// dynamic method to name the variable<br />
return view('welcome')->withLinks($links);<br />
Next, edit the welcome.blade.php file and add a simple foreach to show all the links:<br />
<br />
@foreach ($links as $link)<br />
<a href="{{ $link->url }}">{{ $link->title }}</a><br />
@endforeach<br />
Here’s what the welcome.blade.php HTML should look like:<br />
<br />
<body><br />
<div class="flex-center position-ref full-height"><br />
@if (Route::has('login'))<br />
<div class="top-right links"><br />
@auth<br />
<a href="{{ url('/home') }}">Home</a><br />
@else<br />
<a href="{{ route('login') }}">Login</a><br />
<a href="{{ route('register') }}">Register</a><br />
@endauth<br />
</div><br />
@endif<br />
<br />
<div class="content"><br />
<div class="title m-b-md"><br />
Laravel<br />
</div><br />
<br />
<div class="links"><br />
@foreach ($links as $link)<br />
<a href="{{ $link->url }}">{{ $link->title }}</a><br />
@endforeach<br />
</div><br />
</div><br />
</div><br />
</body><br />
<br />
If you refresh your browser, you should now see the list of all the links added. With that all set, let’s move to submitting links.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-61468294559416027742019-07-26T19:17:00.002-07:002019-07-26T19:17:31.621-07:00Laravel Tutorial - Installation<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s1600/laravel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="449" data-original-width="808" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qerg5C1zhHt-9i7RzyAA3CBimugA4tWT0pjCrHSk_grK-y38MMmXjlzZmtVOoO2tmDr8lup4t4VGlfsKtl3hyVjHg2472a75wQB1X_J5HrQVbfF5r4A5zqQJNlLIbblGvT3I06-6HRfK/s640/laravel.jpg" width="640" /></a></div>
<br />
Laravel - Every project has to start from somewhere, either assigned to you by your work or just an idea in your head. No matter where it originates, thoroughly planning out all the features before you start coding is paramount in completing a project.<br />
<br />
How you plan is dependent on how your mind works. As a visual person, I like to plan on paper, drawing out the way I picture the screens looking and then working backward into how I would code it. Others prefer to write a project plan in a text file, wiki, or some mind mapping tool. It doesn’t matter how you plan, just that you do it.<br />
<br />
For this guide, we are going to be building a link directory. Here is a list of fundamental goals for this links app:<br />
<br />
Display a simple list of links.<br />
Create a form where people can submit new links.<br />
Validate the form.<br />
Insert the data into the database.<br />
<br />
The First Steps<br />
With a simple plan of attack outlined, it’s time to get a brand new empty project up and running. I like to put all my projects in a ~/Sites directory, and these instructions will use that location. I’ve already “parked” this directory in Valet, so any folders will automatically be mapped to “foldername.test” in the browser.<br />
<br />
Open your terminal application and switch into this directory.<br />
<br />
mkdir ~/Sites<br />
cd ~/Sites<br />
<br />
Next, install Laravel’s command line installer:<br />
<br />
composer global require "laravel/installer"<br />
You need to make sure that the global Composer bin is in your path. You can do so by adding the following to your PATH in your ~/.bash_profile or ~/.zshrc if you are using Z shell:<br />
<br />
export PATH="$HOME/.composer/vendor/bin:$PATH"<br />
For the path to take effect, you need to restart your terminal session of source the file again:<br />
<br />
source ~/.bash_profile<br />
Now you can use the Laravel installer to create new projects from the command line:<br />
<br />
laravel new links<br />
This will create a new directory at ~/Sites/links and install an stock Laravel project. Visiting links.test in the browser now shows the default Laravel welcome page:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://i1.wp.com/wp.laravel-news.com/wp-content/uploads/2016/03/laravel-landing.png?resize=600%2C268" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="268" data-original-width="600" height="284" src="https://i1.wp.com/wp.laravel-news.com/wp-content/uploads/2016/03/laravel-landing.png?resize=600%2C268" width="640" /></a></div>
<br />
Now scaffold out the authentication system by running:<br />
<br />
php artisan make:auth<br />
Even though this tutorial will not dive into authentication by running this command, it will modify our views and routes. So by doing it early, we don’t have to worry about it messing with any of our code.<br />
<br />
With the basics set up and working, it’s time to start doing some coding.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0tag:blogger.com,1999:blog-5396422449825938896.post-32393779186557039052019-07-26T19:15:00.001-07:002019-07-26T19:15:13.868-07:00Laravel Tutorial - Intro<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmaRdgsYPUbn6B8CcUtsRxeJ8Vh4f4T4W7F0PgEGwqDy5H8EvOocqk8MBWZddlBE4jkxuG9fLJ1DvqkHRvVwGbg16U4VxoR-DXExyMb6srEsp3A_y0LoatiofRrkdhEeAj3DBWyZCMmBh9/s1600/laravel.jpg" imageanchor="1"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmaRdgsYPUbn6B8CcUtsRxeJ8Vh4f4T4W7F0PgEGwqDy5H8EvOocqk8MBWZddlBE4jkxuG9fLJ1DvqkHRvVwGbg16U4VxoR-DXExyMb6srEsp3A_y0LoatiofRrkdhEeAj3DBWyZCMmBh9/s640/laravel.jpg" width="640" /></a><br />
<br />
<b>Laravel </b>- Since its initial release in 2011, Laravel has experienced exponential growth. In 2015, it became the most starred PHP framework on GitHub and rose to the go-to framework for people all over the world.<br />
<br />
Laravel focuses on the end user first, which means its focus is on simplicity, clarity, and getting work done. People and companies are using it to build everything from simple hobby projects all the way to Fortune 500 companies.<br />
<br />
My goal with this Laravel tutorial to create a guide for those just learning Laravel. This guide will take you from the very beginning of an idea into a real deployable application.<br />
<br />
This look at Laravel will not be exhaustive, covering every detail of the framework, but if you want that I recommend the book Laravel: Up and Running. This tutorial does expect a few prerequisites and here is what you will need to follow along:<br />
<br />
A local PHP environment (Valet, Homestead, Vagrant, MAMP, etc.).<br />
A database. I’ll be using MySQL.<br />
PHPUnit installed.<br />
Node installed.<br />
Note: For the local PHP environment I am using a Mac and Valet because it automatically sets up everything. If you are on Windows, you should consider Homestead or some flavor of a virtual machine.<br />
<br />
I am attempting to go through the process of creating a new application just as I would in a real-world environment. In fact, the code and idea are from a project I built.Rickman Roedavanhttp://www.blogger.com/profile/04032560744805428068noreply@blogger.com0