Rebuilding Isometric World
<p>If you’ve been following my articles for a while, you would have known I have written a<a href="https://github.com/sheunglaili/isometric-grid" rel="noopener ugc nofollow" target="_blank"> little isometric grid demo</a> in pure Javascript.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:660/1*UBfuFATNU8ZJGR-ziKig4Q.gif" style="height:430px; width:600px" /></p>
<p>That approach works well for what I was trying to archive but I am planning on adding more functionality into the website. Hence in this article, let me rebuild the project using <a href="https://pixijs.com/" rel="noopener ugc nofollow" target="_blank">Pixi.js</a> and it’s React binding, <a href="https://pixijs.io/pixi-react/" rel="noopener ugc nofollow" target="_blank">React Pixi</a>.</p>
<blockquote>
<p>If you wanna learn more about the math behind isometric graphics, I suggests you checking out <a href="https://www.youtube.com/watch?v=04oQ2jOUjkU" rel="noopener ugc nofollow" target="_blank">this video</a> for it’s in depth explanation</p>
</blockquote>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:382/1*fPrJBAIfY7kAIBnyKeW5Mg.png" style="height:287px; width:347px" /></p>
<p>Awesome asset pack from <a href="https://twitter.com/dani_maccari?lang=en-GB" rel="noopener ugc nofollow" target="_blank"><strong>@dani_maccari</strong></a><strong> !</strong></p>
<p>For starters, I found a great isometric asset pack from <a href="https://dani-maccari.itch.io/tiny-blocks-isometric-pixel-assets" rel="noopener ugc nofollow" target="_blank">itch.io</a> that suits my needs. It includes some fine detailed blocks which would come in handy in some of the future use cases!</p>
<p><a href="https://medium.com/@alexsheunglaili/rebuilding-isometric-world-06333d5bcf6a"><strong>Website</strong></a></p>