Skip to content

Commit

Permalink
Update part-1.md
Browse files Browse the repository at this point in the history
  • Loading branch information
seawaffle authored Oct 7, 2024
1 parent e6e521f commit ded233b
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions part-1/part-1.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

This part assumes you've read Part 0 and are at the Picotron desktop. Press Alt+Right twice to get to the code editor to begin:

![[p1-code-editor.png]]
![Screenshot of the Picotron code editor](p1-code-editor.png)

Picotron does start with an empty project resident in memory, and this is what we're looking at right now. We'll go over the basics of saving at the end of this part, and we'll reload it in Part 2.

Expand All @@ -12,7 +12,7 @@ Since Picotron is a game development application, the code it's expecting is tai
- `_draw()`: This is the draw function. This is where all of your code to put things on the screen will live. This generally gets called 60 times per second, but the window manager might slow that down to 30 or 20 times per second if your game is using too much CPU.
We're going to add these functions to `main.lua`. In Lua, functions are preceded by the word 'function', and end with the word 'end', so the basic structure of the file will look like this:

```Lua
```lua
function _init()
end

Expand All @@ -25,7 +25,7 @@ end

You could run this right now, but you'd just get a black screen, since we're not drawing anything in our `_draw()` function. So lets add something to simply put some text on the screen by replacing the `_draw()` function with the following:

```Lua
```lua
function _draw()
cls()
print('Hello World')
Expand All @@ -34,12 +34,12 @@ end

Press Ctrl+R to run your program. You should see 'Hello World' displayed in white on a black screen, like this screenshot:

![[p1-hello-world.png]]
![Our Picotron Hello World](p1-hello-world.png)

Press Esc twice to exit back to your code editor. Congrats on running your first Picotron program! Let's go over what we've just added;

What you see here are your first Picotron API calls. `cls()` clears the screen, which you're going to want to do at the beginning of your `draw()` function. `print()` is a function that allows you to draw text to the screen. This function can take multiple parameters. Right now, we're only giving it one parameter, the string 'Hello World'. It will draw that string at the internal cursor position (which we will get into in a later part). We can also specify the coordinates to draw it as well as the color to draw it with, so let's try that now:
```Lua
```lua
function _draw()
cls()
print('Hello World', 150, 100, 8)
Expand All @@ -48,32 +48,32 @@ end

Again, press Ctrl+R to run:

![[p1-red-hello-world.png]]
![Hello World, but moved and red](p1-red-hello-world.png)

And press Esc twice to return to your code editor again.

This is fun and useful, but what you really want is to make a character and have it move around your screen! Let's get to that now. First, press Alt+Left once to move to the sprite editor:

![[p1-sprite-editor.png]]
![Picotron sprite editor](p1-sprite-editor.png)

That looks complicated, doesn't it. For right now, we're not going to do too much with this, we just want to make an image we can use for our player. Pick a color and doodle a little bit in the 16x16 pixel grid on the left, like so:

![[p1-doodle.png]]
![A little dude](p1-doodle.png)

Wow, my art skills are not great. Hopefully your doodle came out a little better. Either way, lets get this little guy on the screen! Press Alt+Right to go back to your code editor. We'll modify our `_draw()` function to remove the `print()` and replace it with a new API command called `spr()`.

```Lua
```lua
function _draw()
cls()
spr(1, 150, 100)
end
```

![[p1-little-guy.png]]
![He's on the screen now](p1-little-guy.png)

Well hey, look at that, it came out just like I wanted it to! What's next? Moving our little guy around, of course! To do that we're going to need to add a few things. Since our character's position will be changing, we'll modify our code to read the position from a variable instead of hardcoding it:

```Lua
```lua
function _init()
player_x = 150
player_y = 100
Expand All @@ -90,7 +90,7 @@ end

That change isn't going to do anything if you run it again, but it's necessary for the next part: input!

```Lua
```lua
function _update()
if btnp(0) then
player_x -= 16
Expand All @@ -106,7 +106,7 @@ end

`btnp()` is another Picotron API call, this time accepting input from a controller or keyboard. The number in the function is telling Picotron which button we're asking about, in this case 0, 1, 2, 3 are Left, Right, Up and Down respectively. We've added or subtracted 16 pixels from the player's position to represent grid movement in each of these directions (Picotron treats the top left corner of the screen as x=0, y=0). If you run your program now, you can control your character with the arrow keys:

![[p1-movement.gif]]
![Look at him go!](p1-movement.gif)

Success! But before we take a break, lets talk about two important topics: saving and exporting. Right now, your game is in Picotron's memory, but it hasn't been written out to the file system for safe keeping. If you close Picotron now, it will all disappear, and you'll have to start this whole thing over. We don't want that! Press Alt+Left once to get over to our Picotron terminal, and type the following:

Expand All @@ -122,6 +122,6 @@ But what if we want to share our awesome game with the world? Picotron has anoth
export roguelike.html
```

Then, you can go back over to your desktop (Alt+Left) and open up the drive by double-clicking on 'drive.loc'. Find 'roguelike.html' in there, right-click and select 'View in Host OS'. A web browser should pop up on your computer with a black screen and a little play icon. Click that play icon, and Picotron will boot into your game, right in the browser! You can move your little dude around to your heart's content, and you can take that html file (the path to which you should be able to see in your browser) and share that on whatever web hosting thing you like. Check out mine here!
Then, you can go back over to your desktop (Alt+Left) and open up the drive by double-clicking on 'drive.loc'. Find 'roguelike.html' in there, right-click and select 'View in Host OS'. A web browser should pop up on your computer with a black screen and a little play icon. Click that play icon, and Picotron will boot into your game, right in the browser! You can move your little dude around to your heart's content, and you can take that html file (the path to which you should be able to see in your browser) and share that on whatever web hosting thing you like. [Check out mine here!](./p1-roguelike.html)

Whew, we did a lot of work today. Maybe it's time to take a break. Or maybe it's time to move to Part 2? Your call!
Whew, we did a lot of work today. Maybe it's time to take a break. [Or maybe it's time to move to Part 2](../part-2/part-2.html)? Your call!

0 comments on commit ded233b

Please sign in to comment.