Replace more .60 by .slint

Mainly an automated change with
    git grep -O"sed -i 's/\.60/.slint/g'" -w "\.60"

and some manual checks
This commit is contained in:
Olivier Goffart 2022-02-02 10:00:12 +01:00
parent d706d63ce1
commit 03534039d6
81 changed files with 314 additions and 313 deletions

View file

@ -1,10 +1,10 @@
# Creating The Tiles From C++
What we'll do is take the list of tiles declared in the .60 language, duplicate it, and shuffle it.
What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it.
We'll do so by accessing the `memory_tiles` property through the Rust code. For each top-level property,
a getter and a setter function is generated - in our case `get_memory_tiles` and `set_memory_tiles`.
Since `memory_tiles` is an array in the `.60` language, it is represented as a [`std::shared_ptr<sixtyfps::Model>`](https://sixtyfps.io/docs/cpp/api/classsixtyfps_1_1model).
We can't modify the model generated by the .60, but we can extract the tiles from it, and put it
Since `memory_tiles` is an array in the `.slint` language, it is represented as a [`std::shared_ptr<sixtyfps::Model>`](https://sixtyfps.io/docs/cpp/api/classsixtyfps_1_1model).
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
in a [`sixtyfps::VectorModel`](https://sixtyfps.io/docs/cpp/api/classsixtyfps_1_1vectormodel) which inherits from `Model`.
`VectorModel` allows us to make modifications and we can use it to replace the static generated model.

View file

@ -5,20 +5,20 @@ After modeling a single tile, let's create a grid of them. For the grid to be ou
1. A data model: This shall be an array where each element describes the tile data structure, such as the
url of the image, whether the image shall be visible and if this tile has been solved. We modify the model
from Rust code.
1. A way of creating many instances of the tiles, with the above `.60` markup code.
1. A way of creating many instances of the tiles, with the above `.slint` markup code.
In SixtyFPS we can declare an array of structures using brackets, to create a model. We can use the <span class="hljs-keyword">for</span> loop
to create many instances of the same element. In `.60` the for loop is declarative and automatically updates when
to create many instances of the same element. In `.slint` the for loop is declarative and automatically updates when
the model changes. We instantiate all the different <span class="hljs-title">MemoryTile</span> elements and place them on a grid based on their
index with a little bit of spacing between the tiles.
First, we copy the tile data structure definition and paste it at top inside the `memory.60` file:
First, we copy the tile data structure definition and paste it at top inside the `memory.slint` file:
```60
{{#include ../../rust/src/main_multiple_tiles.rs:tile_data}}
```
Next, we replace the *<span class="hljs-title">MainWindow</span> := { ... }* section at the bottom of the `memory.60` file with the following snippet:
Next, we replace the *<span class="hljs-title">MainWindow</span> := { ... }* section at the bottom of the `memory.slint` file with the following snippet:
```60
{{#include ../../rust/src/main_multiple_tiles.rs:main_window}}

View file

@ -1,12 +1,12 @@
# Game Logic In C++
We'll implement the rules of the game in C++ as well. The general philosophy of SixtyFPS is that merely the user
interface is implemented in the `.60` language and the business logic in your favorite programming
interface is implemented in the `.slint` language and the business logic in your favorite programming
language. The game rules shall enforce that at most two tiles have their curtain open. If the tiles match, then we
consider them solved and they remain open. Otherwise we wait for a little while, so the player can memorize
the location of the icons, and then close them again.
We'll modify the `.60` markup in the `memory.60` file to signal to the C++ code when the user clicks on a tile.
We'll modify the `.slint` markup in the `memory.slint` file to signal to the C++ code when the user clicks on a tile.
Two changes to <span class="hljs-title">MainWindow</span> are needed: We need to add a way for the MainWindow to call to the C++ code that it should
check if a pair of tiles has been solved. And we need to add a property that C++ code can toggle to disable further
tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed! First, we paste
@ -16,7 +16,7 @@ the callback and property declarations into <span class="hljs-title">MainWindow<
{{#include ../../rust/src/main_game_logic_in_rust.rs:mainwindow_interface}}
```
The last change to the `.60` markup is to act when the <span class="hljs-title">MemoryTile</span> signals that it was clicked on.
The last change to the `.slint` markup is to act when the <span class="hljs-title">MemoryTile</span> signals that it was clicked on.
We add the following handler in <span class="hljs-title">MainWindow</span>:
```60

View file

@ -1,6 +1,6 @@
# Introduction
This tutorial will introduce you to the SixtyFPS UI framework in a playful way by implementing a little memory game. We are going to combine the `.60` language for the graphics with the game rules implemented in C++.
This tutorial will introduce you to the SixtyFPS UI framework in a playful way by implementing a little memory game. We are going to combine the `.slint` language for the graphics with the game rules implemented in C++.
The game consists of a grid of 16 rectangular tiles. When clicking on a tile, an icon underneath is uncovered.
We know that there are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
@ -13,7 +13,7 @@ This is how the game looks like in action:
<video autoplay loop muted playsinline src="https://sixtyfps.io/blog/memory-game-tutorial/memory_clip.mp4"
class="img-fluid img-thumbnail rounded"></video>
A video-recording of this tutorial is also available on YouTube. After introducing the `.60` language the video
A video-recording of this tutorial is also available on YouTube. After introducing the `.slint` language the video
continues with a Rust implementation, but around minute 42 the C++ begins:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_-Hxr6ZrHyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

View file

@ -3,19 +3,19 @@
With the skeleton in place, let's look at the first element of the game, the memory tile. It will be the
visual building block that consists of an underlying filled rectangle background, the icon image. Later we'll add a
covering rectangle that acts as a curtain. The background rectangle is declared to be 64 logical pixels wide and tall,
and it is filled with a soothing tone of blue. Note how lengths in the `.60` language have a unit, here
and it is filled with a soothing tone of blue. Note how lengths in the `.slint` language have a unit, here
the `px` suffix. That makes the code easier to read and the compiler can detect when your are accidentally
mixing values with different units attached to them.
We copy the following code into the `memory.60` file:
We copy the following code into the `memory.slint` file:
```60
{{#include memory_tile.60:main_window}}
{{#include memory_tile.slint:main_window}}
```
Inside the <span class="hljs-built_in">Rectangle</span> we place an <span class="hljs-built_in">Image</span> element that
loads an icon with the <span class="hljs-built_in">@image-url()</span> macro. The path is relative to the folder in which
the `memory.60` is located. This icon and others we're going to use later need to be installed first. You can download a
the `memory.slint` is located. This icon and others we're going to use later need to be installed first. You can download a
[Zip archive](https://sixtyfps.io/blog/memory-game-tutorial/icons.zip) that we have prepared and extract it with the
following two commands: