Replace SixtyFPS in many locations (Uppercase)

This commit is contained in:
Olivier Goffart 2022-02-02 15:41:35 +01:00
parent f48d7d9f9e
commit 3594c20153
57 changed files with 126 additions and 126 deletions

View file

@ -3,7 +3,7 @@ authors = ["SixtyFPS <info@sixtyfps.io>"]
language = "en"
multilingual = false
src = "src"
title = "SixtyFPS Memory Game Tutorial (C++)"
title = "Slint Memory Game Tutorial (C++)"
[output.html]
theme = "../theme"

View file

@ -1,9 +1,9 @@
# Conclusion
In this tutorial, we have demonstrated how to combine some built-in SixtyFPS elements with C++ code to build a little
In this tutorial, we have demonstrated how to combine some built-in Slint elements with C++ code to build a little
game. There are many more features that we have not talked about, such as layouts, widgets, or styling. Have a look
at the [examples](https://github.com/sixtyfpsui/sixtyfps/tree/master/examples) in the SixtyFPS repo to
at the [examples](https://github.com/sixtyfpsui/sixtyfps/tree/master/examples) in the Slint repo to
see how these look like and can be used, such as the [todo example](https://github.com/sixtyfpsui/sixtyfps/tree/master/examples/todo).
A slightly more polished version of this memory puzzle game is [available in the SixtyFPS repository](
A slightly more polished version of this memory puzzle game is [available in the Slint repository](
https://github.com/sixtyfpsui/sixtyfps/tree/master/examples/memory). And you can <a href="https://sixtyfps.io/demos/memory/" target="_blank">play the wasm version</a> in your browser.

View file

@ -7,7 +7,7 @@ After modeling a single tile, let's create a grid of them. For the grid to be ou
from Rust 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
In Slint 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 `.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.

View file

@ -1,6 +1,6 @@
# 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
We'll implement the rules of the game in C++ as well. The general philosophy of Slint is that merely the user
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

View file

@ -4,11 +4,11 @@ In this tutorial, we use C++ as the host programming language. We also support o
[Rust](https://sixtyfps.io/docs/rust/sixtyfps/) or [JavaScript](https://sixtyfps.io/docs/node/).
You will need a development environment that can compile C++20 with CMake 3.19.
We do not provide binaries of SixtyFPS yet, so we will use the CMake integration that will automatically build
We do not provide binaries of Slint yet, so we will use the CMake integration that will automatically build
the tools and library from source. Since it is implemented in the Rust programming language, this means that
you also need to install a Rust compiler (1.56). You can easily install a Rust compiler
following the instruction from [the Rust website](https://www.rust-lang.org/learn/get-started).
We are going to use `cmake`'s builtin FetchContent module to fetch the source code of SixtyFPS.
We are going to use `cmake`'s builtin FetchContent module to fetch the source code of Slint.
In a new directory, we create a new `CMakeLists.txt` file.
@ -19,12 +19,12 @@ project(memory LANGUAGES CXX)
include(FetchContent)
FetchContent_Declare(
SixtyFPS
Slint
GIT_REPOSITORY https://github.com/sixtyfpsui/sixtyfps.git
GIT_TAG v0.1.6
SOURCE_SUBDIR api/cpp
)
FetchContent_MakeAvailable(SixtyFPS)
FetchContent_MakeAvailable(Slint)
add_executable(memory_game main.cpp)
target_link_libraries(memory_game PRIVATE Slint::Slint)
@ -33,7 +33,7 @@ slint_target_sources(memory_game memory.slint)
This should look familiar to people familiar with CMake. We see that this CMakeLists.txt
references a `main.cpp`, which we will add later, and it also has a line
`slint_target_sources(memory_game memory.slint)`, which is a SixtyFPS function used to
`slint_target_sources(memory_game memory.slint)`, which is a Slint function used to
add the `memory.60` file to the target. We must then create, in the same directory,
the `memory.60` file. Let's just fill it with a hello world for now:
@ -64,6 +64,6 @@ and a window will appear with the green "Hello World" greeting.
Feel free to use your favorite IDE for this purpose, or use out-of-tree build, or Ninja, ...
We just keep it simple here for the purpose of this blog.
*Note*: When configuring with CMake, the FetchContent module will fetch the source code of SixtyFPS via git.
*Note*: When configuring with CMake, the FetchContent module will fetch the source code of Slint via git.
this may take some time. When building for the first time, the first thing that need to be build
is the SixtyFPS runtime and compiler, this can take a few minutes.
is the Slint runtime and compiler, this can take a few minutes.

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 `.slint` language for the graphics with the game rules implemented in C++.
This tutorial will introduce you to the Slint 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