mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-31 07:37:24 +00:00
Replace SixtyFPS in many locations (Uppercase)
This commit is contained in:
parent
f48d7d9f9e
commit
3594c20153
57 changed files with 126 additions and 126 deletions
|
@ -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"
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue