mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-30 23:27:22 +00:00
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:
parent
d706d63ce1
commit
03534039d6
81 changed files with 314 additions and 313 deletions
|
@ -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.
|
||||
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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:
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue