Skip to content

Commit

Permalink
Some changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hope41
Hope41 committed Jun 27, 2024
1 parent 525face commit 9968640
Show file tree
Hide file tree
Showing 15 changed files with 53 additions and 112 deletions.
78 changes: 39 additions & 39 deletions articles/3_tips_for_game_development.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h1>3 Tips for Game Development</h1>
<div class = big><img class = img src = /articles/extra/3_tips_for_game_development/1.png></div>

<div class = demo>
<p>Generally speaking, code looks confusing. That's a fact. After all, why wouldn't it?
<p>Generally speaking, code looks confusing. After all, why wouldn't it?
It's not called "code" for nothing. You know, Morse code, Enigma code, and...
coding code! It's not meant to be easy to understand!</p>
<p>This article discusses how my coding journey began. Through it, I realised that
Expand All @@ -60,22 +60,24 @@ <h3>Step 1. Free Up Your Imagination</h3>

<img style = 'max-width:350px' class = tinyRatio src = /articles/extra/3_tips_for_game_development/2.png>

<p>I don't know why; the picture was so simple, yet it got me thinking.
It got me thinking about all these really cool games... but games that only existed
in my own imagination.</p>

<p>One of the most improtant steps to becoming a game developer
is to let your imagination go
free. You don't need much to inspire you, but a physical library is a good
place to start. Once you have an idea, try to grow it in your mind
or write it down on a piece of paper.</p>
<p>I don't know why, the picture was so simple, but it really
made an impact on me. It made me think about all these really cool
games... but games that only existed in my own imagination.</p>
<p>One of the most important stages in game development is
just letting your imagination run free. Trust me, getting excited
about your game will make a
big difference to the final product. If you need inspiration,
a library book is a good place to start. Once you have an idea,
try to grow it in your mind or write it down on a piece of paper.</p>
</div>

<div class = demo>
<h3>Step 2. Start Small</h3>
<p>Please don't expect your first games to look very good. Like learning a language,
learning to code takes a lot of time and effort. Slowly you get a better understanding
of how and why code is a certain way, and things get easier.</p>
<p>Like learning a language, learning to code takes a lot of time
and effort. Slowly you get a better understanding
of how and why code is a certain way, and things get easier.
You should not expect your first games to be very good.
"Don't run before you can walk," they say, and it's very true.</p>
<p>After messing around a bit with Pygame Zero, we decided to upgrade to Pygame,
as apparently it could handle more without slowing the computer down.</p>

Expand Down Expand Up @@ -135,18 +137,20 @@ <h3>Coin Game</h3>
reason for this was because JavaScript runs online. And making games is no fun
when only you can play them afterwards, right?</p>

<p>The first game I attempted to make in JavaScript was a
full-length 2d platformer with real-time plant simulations,
various dynamic forms of weather... plus a complete physics engine
written all by myself. (I don't use JavaScript libraries by the way.)
<p>The first JavaScript game I attempted to make was a
full-length platformer with realistic plant simulations,
various dynamic forms of weather, and a complete physics engine
created entirely from scratch. (I confess, I still haven't lost that abhorrence
to using JavaScript libraries.)
As usual, I gave up quite quickly.</p>

<div class = hint>
<img src = /svg/bulb.svg>
<p>"Well," you say, "what stopped you from continuing?"
Good question! The whole idea of coding is
fixing glitches. Trouble is, we tend to unintentionally
make more glitches than experienced coders do. However, glitches
Good question! The whole idea of coding is fixing glitches.
Trouble is, us newbies tend to unintentionally
make more glitches than the experienced coders do. However,
as I think I've mentioned before, glitches
can generally be kept at bay by keeping our projects small to begin with.</p>
</div>
</div>
Expand All @@ -165,8 +169,7 @@ <h3>Step 3. Keep Going</h3>
and just get familiar with how JavaScript works. This lead to the creation of
about 24 "tunnel experiments," which simply consisted of putting lots of squares
on the screen and moving them in different ways. I've displayed one of these demos
for you below. Please excuse the dreadful code practices I used.
I've got better since then!</p>
for you below. Please excuse the dreadful code practices I used.</p>
</div>

<div class = demo>
Expand Down Expand Up @@ -235,7 +238,7 @@ <h4>Demo #20</h4>
&lt;/body></pre>

<p>Everything got a bit easier after this stage. And as I went
on to create some more "games" - none of them any good of course -
on to create more "games" - none of them any good of course -
I was slowly getting a better understanding of how code works.</p>

<div style = 'display:flex;gap:15px;flex-wrap:wrap;'>
Expand Down Expand Up @@ -280,22 +283,20 @@ <h3>First Platformer</h3>
<div class = demo>
<h3>Conclusion</h3>

<div class = subDemo>
<p><b>&bull; 1. Free Up your Imagination.</b>
You can't make games if you have no ideas, so really think about the games
you love already, or pictures that inspire you, and try to build from there</p>

<p><b>&bull; 2. Start Small.</b>
Don't take on big projects too early. Even the most experienced
coders can get out of their depth, so try to tailor your projects
to fit your current skill level</p>

<p><b>&bull; 3. Keep Going.</b>
Every game has a boring part to its development. Don't give up!
Try to think of the end result and keep things varied</p>
</div>
<p><b>Free Up your Imagination.</b>
You can't make games if you have no ideas, so really think about the games
you love already, or pictures that inspire you, and try to build from there.</p>

<p><b>Start Small.</b>
Don't take on big projects too early. Even the most experienced
coders can get out of their depth, so try to tailor your projects
to fit your current skill level.</p>

<p><b>Keep Going.</b>
Every game has a boring part to its development. Don't give up!
Try to think of the end result and keep things varied.</p>

<p>Well, that's pretty much everything! All the games from this point
<p>That's pretty much everything! All the games from this point
have been published on the <a href = /games class = normal target = _blank>Games</a>
tab of this website. I hope this article gave you a bit of
insight into my journey through game development.
Expand All @@ -307,7 +308,6 @@ <h3>Conclusion</h3>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = 3_tips_for_game_development>
Expand Down
1 change: 0 additions & 1 deletion articles/create_and_animate_enemies_using_shapes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,6 @@ <h3>The ...?</h3>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = create_and_animate_enemies_using_shapes>
Expand Down
1 change: 0 additions & 1 deletion articles/making_games_the_bits_that_nobody_notices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,6 @@ <h2>THE SMALLER DETAILS</h2>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = making_games_the_bits_that_nobody_notices>
Expand Down
1 change: 0 additions & 1 deletion articles/procedural_room_generation_snakes_and_ladders.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,6 @@ <h3>Side effects</h3>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = create_and_animate_enemies_using_shapes>
Expand Down
1 change: 0 additions & 1 deletion articles/using_inverse_kinematics_to_animate_your_character.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -621,7 +621,6 @@ <h3>Conclusion</h3>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = using_inverse_kinematics_to_animate_your_character>
Expand Down
1 change: 0 additions & 1 deletion content/anthrophobia_fear_of_crowds.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ <h1>Anthrophobia</h1>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = anthrophobia_fear_of_crowds>
Expand Down
66 changes: 13 additions & 53 deletions content/canvas_craft.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,68 +38,28 @@ <h1>CanvasCraft</h1>
</div>

<div class = demo>
<p><b>CanvasCraft is a unique online tool designed to allow creators
to easily make images, game levels, and entire worlds within minutes.
It's very new, so please raise an issue on GitHub if you find any glitches.</b></p>
<p><a class = button href = https://github.com/canvas-craft/canvas-craft.github.io target = _blank>Check Out the Source Code</a>
<a class = button href = https://github.com/canvas-craft/canvas-craft.github.io/issues/new target = _blank>Raise an Issue</a></p>
<h1>Try it today at <a class = normal href = https://canvas-craft.github.io target = _blank>
canvas-craft.github.io</a></h1>
<p><b>CanvasCraft is a unique online tool designed to give gives coders and
game developers a simple yet convenient way to build game levels.
It's rather new, so please raise an issue on GitHub if you find any glitches.</b></p>
<p><a class = button href = https://github.com/canvas-craft/canvas-craft.github.io target = _blank>Give It a Star</a>
<a class = button href = https://github.com/canvas-craft/canvas-craft.github.io/issues/new target = _blank>Report a Bug</a></p>
</div>

<div class = demo>
<p>The following page is a very brief documentation of how to start using CanvasCraft.</p>
</div>

<div class = demo>
<h3>Getting Started</h3>
<p>When you first open Canvas Craft and click on the screen, it will take you to a page
that looks a bit like this.</p>
<div class = big><img class = img src = /content/extra/canvas_craft/1.png></div>
<p>You can create shapes using the "Block" tool (selected by default), or the "Line"
tool. To draw a shape on your canvas, simply drag your mouse across the white square.</p>
<div class = big><img class = img src = /content/extra/canvas_craft/2.png></div>
<p>After creating a few rectangles, you'll probably want to give them different textures.</p>
<p>Select one of them (by clicking on it) and take a look at the panel on the top-left of the
screen. This panel contains all the statistics for the selected shape. Scroll down untill you come
to the "Textures" heading and either press "Upload Image" to add an image from your device,
or choose a texture from the list of presets. Press "Run Code" to apply the preset to your shape.</p>
<p>At this point, you may notice a code box just below the list of presets. This allows you
to customise exactly what texture you wish your shape to have. If you have some knowledge on
how to write in JavaScript and on how RGB colours work, it should be quite simple. The two inputs
of the code box are the X and Y coordinates of a pixel. The code will take these coordinates, do
some fancy things to them, and finally "return" a colour made of Red, Green and Blue values.</p>
<div class = hint>
<img src = /svg/bulb.svg>
<p>Imagine the code box as simply a long algebra equation.
Algebra is all about numbers represented
by letters. Take the equation <span class = snip>X &times; X = A</span>
for instance. If <span class = snip>X = 1</span>, it means
<span class = snip>A = 1</span>.
But if <span class = snip>X = 2</span>,
it means <span class = snip>A = 4</span>.
The code box works in a similar way. You can apply maths to the X and Y inputs
and return an RGB colour based on that.</p>
</div>
<p>If you still don't understand, don't worry! I added the feature to CanvasCraft
because it makes game level design much quicker. For example, if I wanted to add
a simple brick to my image, I would first select an orangey-pink colour from the selector
on the topnav. Then, I would drag on the canvas with the "Block" tool to create a
brick shape on the screen. To make a brick <i>texture</i>, I would select
the "Noise" preset and press "Run Code." If I wanted the
noise to be more extreme, I could change the amount <span class = snip>Math.random()</span>
is multiplied.</p>
<div class = big><img class = img src = /content/extra/canvas_craft/3.png></div>
<p>&bull; 🧩️ CanvasCraft's built-in shader feature empowers you to quickly generate complex and natural-looking surfaces using simple JavaScript code.</p>
<p>&bull; 📱 Easily collaborate with others and share your work with the File Export feature, or tailor the UI to suit your needs.</p>
<p>&bull; 💡 Whether you're a coder, a digital artist, or are simply exploring different ways to create, CanvasCraft has been designed to bring your ideas to life.</p>

<p>Canvas Craft is still in early stages of development, but there are still many
other features that haven't been covered on this page. If you think CanvasCraft
might be helpful to you, make sure you check out its
<a class = normal href = https://github.com/canvas-craft/canvas-craft.github.io>GitHub</a>
for more information or ask for advice in the comments.</p>
<p>You can learn more about it on the website,
<a class = normal href = https://canvas-craft.github.io target = _blank>
canvas-craft.github.io</a>.</p>
</div>

<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = "canvas_craft">
Expand Down
1 change: 0 additions & 1 deletion content/infinite_zoom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ <h1>Infinite Zoom</h1>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = "infinite_zoom">
Expand Down
1 change: 0 additions & 1 deletion content/ios_mission.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@ <h3>Things I Learned</h3>
<div class = demo>
<span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
Leave a comment
<div class = tinyText>By posting, you consent to having your comment and optional name published here.</div>
<input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
<input type = hidden name = subject value = 'Someone posted a comment!'>
<input type = hidden name = address value = "ios_mission">
Expand Down
Loading

0 comments on commit 9968640

Please sign in to comment.