Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Building Steam Games with React

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode, Scott and Wes talk with Drew Conley about building games with Javascript.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 1:58 - What is Danger Crew?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 5:25 - Did you have a background in game dev before this?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 8:36 - What were the initial resources you went to to make a game in React?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 10:27 - How much of it is Canvas?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 13:06 - What other libraries are you using?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 14:00 - How did you lay out the environments?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 16:35 - How is text rendered?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 22:40 - How did you do all of the animation?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 26:08 - What performance issues did you run into?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 27:31 - How do you handle user states and saves?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 29:21 - Is there any server side aspect?</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 30:42 - What was the process for creating the level editor?</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 34:38 - How did you publish the game / wrap it as an executable to sell?</p> <p class="has-line-data" data-line-start="43" data-line-end="44"> 38:16 - How do you update it?</p> <p class="has-line-data" data-line-start="45" data-line-end="46"> 39:43 - How difficult was creating the game logic?</p> <p class="has-line-data" data-line-start="47" data-line-end="48"> 41:20 - The dev theme in the game is super prominent, did that make working on it more fun?</p> <h2 class="code-line" data-line-start="49" data-line-end="50"> <a id="Links_49" name="Links_49"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://store.steampowered.com/">Steam</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://thedangercrew.com/">Danger Crew</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.aseprite.org/">aseprite</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href= "https://store.steampowered.com/app/1064690/Danger_Crew/">Buy Danger Crew</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://drewconley.org/">Drew Conley</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://s.codepen.io/shshaw/debug/XbxvNj">Pixels to SVG</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.yoyogames.com/gamemaker">GameMaker</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://drewconley.org/2019-08-25-dangercrew-editors/">Making an editor</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> <a href="https://electronjs.org/">Electron</a></li> </ul> <h2 class="code-line" data-line-start="60" data-line-end="61"> <a id="_SIIIIICK__PIIIICKS__60" name= "_SIIIIICK__PIIIICKS__60"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> Drew: <a href= "https://www.instagram.com/nathanwpylestrangeplanet/">Strange Planet Instagram</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Wes: <a href= "https://twitter.com/wesbos/status/1166350577519009793">MX Master Config Tweet Thread</a></li> <li class="has-line-data" data-line-start="63" data-line-end="65"> Scott: <a href="https://www.figma.com/">Figma</a></li> </ul> <h2 class="code-line" data-line-start="65" data-line-end="66"> <a id="Shameless_Plugs_65" name="Shameless_Plugs_65"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> Drew: <a href="https://thedangercrew.com/">Danger Crew</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> <li class="has-line-data" data-line-start="68" data-line-end="70"> Scott: <a href= "https://www.leveluptutorials.com/pro">LevelUpTutorials Pro - Advanced Gatsby & Shopify</a></li> </ul> <h2 class="code-line" data-line-start="70" data-line-end="71"> <a id="Tweet_us_your_tasty_treats_70" name= "Tweet_us_your_tasty_treats_70"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode, Scott and Wes talk with Drew Conley about building games with Javascript.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Show Notes 1:58 - What is Danger Crew?
 5:25 - Did you have a background in game dev before this?
 8:36 - What were the initial resources you went to to make a game in React?
 10:27 - How much of it is Canvas?
 13:06 - What other libraries are you using?
 14:00 - How did you lay out the environments?
 16:35 - How is text rendered?
 22:40 - How did you do all of the animation?
 26:08 - What performance issues did you run into?
 27:31 - How do you handle user states and saves?
 29:21 - Is there any server side aspect?
 30:42 - What was the process for creating the level editor?
 34:38 - How did you publish the game / wrap it as an executable to sell?
 38:16 - How do you update it?
 39:43 - How difficult was creating the game logic?
 41:20 - The dev theme in the game is super prominent, did that make working on it more fun?
 Links  Steam

 Danger Crew

 aseprite

 Buy Danger Crew

 Drew Conley

 Pixels to SVG

 GameMaker

 Making an editor

 Electron

  ××× SIIIIICK ××× PIIIICKS ×××  Drew: Strange Planet Instagram

 Wes: MX Master Config Tweet Thread

 Scott: Figma

  Shameless Plugs  Drew: Danger Crew

 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
 Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify

  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Building Steam Games with React

Poslechněte si podcast