The Weekly Squeak

Tag: programming

  • Lesson 7: Programming the Shooter Game in Squeak/Smalltalk

    Lesson 7: Programming the Shooter Game in Squeak/Smalltalk

    Let us dive into the exciting process of game creation!

    In this lesson, you will begin writing the actual code that brings your game to life. The previous lessons prepared you by helping define the game’s key objects and their responsibilities. Now, with those ideas in place, it is time to create your first class in Smalltalk: ShooterGame.

    This class will act as the canvas for everything else that follows. Though it may seem plain at first, much like an artist’s blank canvas, your ShooterGame Morph will soon host a lively collection of interactive game objects – ships, enemies, shots, and more. Unlike a painting, however, this canvas can respond, animate, and change as your code evolves.

    Using the System Browser

    The work begins in the System Browser, a powerful tool within the Squeak environment where you can write, view, and organize your code. You can open the System Browser from the main menu under Tools → Browser, or by left-clicking on the desktop background and selecting Browser.

    This browser is not the only place you can write code in Squeak, but it is the one you will use most frequently as you build and modify your game. You will use it to define classes, write methods, organize your code into categories, and explore existing functionality that your objects can build on.

    ShooterGame as a Morph

    When you create your ShooterGame class, you define it as a subclass of Morph. This design choice is essential. A Morph is a graphical object in Squeak that can be added to the screen, moved around, colored, resized, and interacted with. By making ShooterGame a Morph, you give it the ability to appear on the screen and act as a visible, interactive container for the other game elements.

    This inheritance relationship also means that ShooterGame will share the capabilities of Morphs – like positioning and drawing – while allowing you to add new, game-specific behavior through your own methods.

    Understanding Initialization

    After defining your class, you will write its first method: initialize. This is a special method that sets up a new instance of the class when it is created. It is also an ideal place to define how the object should appear and behave initially.

    An instance of a class is the actual object that gets created from that class. Think of the class as a blueprint or a set of instructions – like the design for a computer. That design tells you what the computer will have and how it will work. But until someone actually builds a computer from that design, you do not have a real one. The same is true in programming: the class is the design, and an instance is the real, usable object created from that design. Every time you create a new object from a class, you are making a new instance of it. And because everything in Smalltalk is an object, even the class itself is a kind of object – one that can do things, not just describe them!

    Inside the method, you will encounter super initialize. This line is important. It tells the system to first run the initialize behavior of the parent class – in this case, Morph – before adding your custom setup code. An initialize method should always start by sending super initialize. Skipping this line can lead to unexpected issues because it would prevent an object from preparing itself properly.

    Following that, you will define the Morph’s position and size using the position: and extent: messages. In Squeak, extent refers to the width and height of the Morph – think of it as how much space it occupies on the screen. The coordinate system in Squeak starts at the top-left corner of the screen (0 @ 0), and each point is written as an x and y pair (e.g., 640 @ 480). These lines of code determine where your game window will appear and how large it will be.

    You also set the background color to black and give the object a name using setNameTo:. These finishing touches help establish your game’s visual style and identity.

    Positioning and Sizing

    In Squeak, the World refers to the entire display area of the environment – the space where all graphical objects (Morphs) appear and interact. It is the backdrop of your development tools, your game, and the broader environment in which your game objects will live and move. Even the tools you use to write your code – such as the System Browser – are Morphs themselves, sharing the same space and able to interact with the same environment as your game.

    Squeak uses a coordinate system to place and size Morphs on the screen. The top-left corner of the World is the origin (0 @ 0). When you set a Morph’s position to 100 @ 100, it will appear 100 points from the left and 100 points from the top. The extent describes the Morph’s width and height – how much space it will take up on the screen. These values give you precise control over where and how your game interface is laid out.

    Seeing the Results

    Even after completing just this lesson, you will be able to see the first visible result of your code. Though the game is not yet playable, the space in which it will take shape is now visible and ready for action. The foundation is laid, and every lesson from here will build upon it.

    Remember that these lessons are designed for live coding – you are encouraged to run, modify, and explore your work as you go. That is one of the great strengths of Smalltalk. The lessons in this series are designed for live coding, meaning the game does not need to be closed and restarted when changes are made. You can follow through the lessons just as easily without live coding; however, you may not learn as many topics, as some only arise from using live coding. Also, remember that, unlike some other programming languages, Smalltalk does not require a final period (.) at the end of a method. The final period in the last expression is optional.

    And finally, remember to save your work once you have successfully completed the lesson. This ensures you can pick up right where you left off next time or provides a good recovery option if something should go wrong.

    Lesson Resources

    To access Lesson 7 and the full series of tutorials for building the Shooter Game, visit https://scottgibson.site/ShooterGame/. There you will find everything you need to follow along, including PDFs, Squeak Help lesson content, source code, images, sound files, and other game assets. This site not only provides everything you need to progress but also even allows you to play the game directly in your browser using SqueakJS. Whether you are just getting started with Squeak/Smalltalk or advancing your skills, these resources will help guide you as you move forward through the game development process.

    ← Lesson 6

    Have a great time with Smalltalk and keep on Squeaking!

  • Using the Squeak Help System for Your Projects

    Using the Squeak Help System for Your Projects

    Dr. Nicola Mingotti has created a highly useful video tutorial, “The Squeak Smalltalk Help System”, where he demonstrates how to use and implement the Squeak Help System in your projects. In the video, Dr. Mingotti walks you through a step-by-step guide on creating documentation for your code, providing valuable insights into integrating the help system into your workflow. You can check out his video here.

    Additionally, Dr. Mingotti offers supporting materials in his Swiki article here, which includes code snippets and further comments to aid your understanding.

    Overview of the Squeak Help System

    One of the many great features of Squeak is its rich set of help documentation. The default Squeak image comes with valuable documentation that covers topics such as: How to Use Squeak, How to Contribute to Squeak, Tutorials, The Terse Guide to Squeak, and Using WebClient and WebServer. This documentation is easily searchable, making it a highly useful resource for your projects.

    Help System vs. Code Comments

    It is important to note that the Squeak Help System is not intended to replace code comments. Squeak/Smalltalk provides excellent functionality for adding comments directly in your code, and these should remain the primary way to document code behavior, logic, and functionality. The Help System is designed for documentation outside the scope of code comments, such as explaining overall project goals, providing tutorials, or offering guidance on using tools and features in your project.

    Features of the Help System

    The help documentation system offers a variety of features, including text styling (bold, italics, strikethrough, underline), code formatting and syntax highlighting, and URLs, to name a few.

    Additionally, you can add images to your documentation. This feature is currently available in the Trunk image, but you can implement it in other images as well by using its code as a reference. For the 6.0 image, you can perform a fileout of the SqueakHelpTextImage class from the Trunk image and then filein it into the 6.0 image. Alternatively, you can create your own code to implement this functionality! Thanks to Christoph Thiede for providing guidance on how he implemented this feature. You can find his post here.

    How to Insert an Image into Your Help Page

    1. Open a Workspace window.
    2. In the Workspace, perform a “do it” on the following code:
      Clipboard clipboardText: Character startOfHeader asString.
    3. In your help page window, move your cursor to the location where you want to insert the image. Paste the clipboard contents (Ctrl+v or Cmd+v on Mac). At this point, you won’t see anything yet.
    4. (Optional) Skip this step if you prefer typing the code manually. Copy the following code, replacing /path/to/file/image.png with the actual path and filename of your image:
      SqueakHelpTextImage forForm: (ImageReadWriter formFromFileNamed: '/path/to/file/image.png')
    5. Return to your help page window and move your cursor to the same location where you want to insert the image. Press Alt+5 (or Cmd+5 on Mac), then select “Custom attribute…” from the bottom of the list.
    6. When the Input Requested box appears, paste the image code from Step 4 (or manually type it in) into the field labeled “Enter expression for text attribute:”. You should now see a shaded outline where the image will appear.
    7. Save your changes by pressing Ctrl+s (or Cmd+s on Mac).

    Your image is now successfully inserted into your help document!

    Conclusion

    A big thank you to Dr. Nicola Mingotti for his helpful video tutorial on using the Squeak Help System, which offers a step-by-step guide for integrating the help system into your workflow. His Swiki article is also a helpful resource with code snippets and additional comments. Be sure to check out his materials to further enhance your understanding of Squeak and the Help System!

    Have a great time with Smalltalk and keep on Squeaking!

  • Lesson 2: Programming the Shooter Game in Squeak/Smalltalk

    Lesson 2: Programming the Shooter Game in Squeak/Smalltalk

    Lesson 2: Moving Morphs

    In this lesson, we will focus on making Morphs move, an essential step in creating interactive and engaging gameplay. You will learn how to send messages to Morph objects, enabling them to change their position on the screen. Movement is a key part of any game, whether it involves your ship, enemies, or projectiles. By the end of this lesson, you will understand different ways to move Morphs relative to a specific location, giving you basic control over their movement in your game.

    To begin, it is important to understand how Morph movement is accomplished in Squeak, a version of Smalltalk, as not all Smalltalk implementations support Morphs, which is what we are using here. Squeak is an object-oriented language, meaning everything is an object. Objects can communicate with each other by sending messages, which is how actions and information are requested in Squeak. Much like how people communicate by sending messages to one another, objects in Squeak send messages to request actions or receive information, or both.

    Understanding Messages in Smalltalk

    In Smalltalk, there are three types of messages: unary, binary, and keyword. Unary messages have the highest precedence, followed by binary messages, and then keyword messages. These different types of messages help objects interact in various ways.

    • Unary messages are messages that are sent to an object without arguments.
    • Binary messages consist of special characters like +, -, or @, and each one takes exactly one argument to perform an action or computation involving two objects.
    • Keyword messages consist of one or more keywords, each ending with a colon (:), and each keyword takes an argument.

    The Difference Between position: and position

    In this lesson, you will focus on understanding how to use the position messages. The first important thing to know is the difference between two messages that seem similar but actually work in different ways: position and position:. They both deal with the position of Morphs, but they are used differently.

    • The message position, without a colon, is a unary message. It does not require any arguments and simply retrieves the current position of the Morph.
    • The message position:, with a colon at the end, is a keyword message. It can receive a value or an argument, which is used to change the position of the Morph.

    This difference in how the messages are structured is important because it tells Squeak how to process them. The position message simply retrieves the current location of the Morph, while the position: message accepts an argument to set or change the Morph’s location.

    Understanding How to Control Morph Movement

    By understanding how messages work in Squeak, you can effectively control the movement of Morphs. Each message, whether unary, binary, or keyword, enables you to send specific instructions to objects, helping them change their state or position on the screen. This knowledge of messages forms the basis of interacting with objects in your game.

    As you progress through the lesson, you will learn how to send different types of messages to Morphs, allowing you to interact with them in various ways. This skill will be crucial for making your game dynamic and interactive, enabling you to work with Morphs to create engaging gameplay elements.

    By the end of this lesson, you will have a good foundation in how messages are used to control movement in Squeak, and you will be ready to apply this knowledge in your game.

    Final Notes

    Please remember to save your Squeak image after each lesson. This way, if you ever encounter a problem with your code, you can always close the image and reopen it from where you last saved it. It would be helpful to save your Squeak image after you have successfully completed each lesson, so you can always reopen the image from the last completed lesson in case something unexpected happens while proceeding through the current lesson.

    Note that the extra parentheses in this lesson are not necessary, but they may help new learners visualize the objects conceptually, especially at the start. The syntax is still correct and can be adjusted later, so nothing harmful is being introduced. At this point, it seemed better to provide a visual, conceptual understanding through the code, rather than focusing solely on minimizing syntax. Future lesson code will not include these.

    Lesson Resources

    For the complete series of lessons on creating the Shooter Game, including all the necessary resources like PDFs, source code, images, sound files, and more, visit https://scottgibson.site/ShooterGame/. This site not only offers everything you need to progress but also lets you play the game directly in your browser using SqueakJS. Whether you are just getting started with Squeak/Smalltalk or are advancing your skills, these resources will guide you through each step of the game development process, helping you apply the techniques you learned in this lesson, such as moving Morphs and controlling game objects.

    ← Lesson 1

    Lesson 3 →

    Have a great time with Smalltalk and keep on Squeaking!