Forem: akira.

Top 5 HyperCard point & click game

akira. — Tue, 27 Apr 2021 04:45:58 +0000

In this article, I will introduce some of the best 5 pointer & click games that I would like you to try, selected by my own judgment and prejudice as an old mac software enthusiast.
All of these games can be downloaded from the site.
And also These game only can work on classic mac environment.
If you want to play, buy a used Mac on eBay and you can play them all for free.

So let's go.

5. Spy! 1.0

This game follows the activities of the protagonist, a CIA operative who travels to Russia as a spy. The graphics are very poor, and the game looks like it was developed by an individual, with many free template images being used. However, the content of the game scenario is quite well-developed. I'm currently working on an iOS app game based on this game.
The difficulty level of the game is low.

4. Lenny and Rita

This is a classic detective game with color graphics.
The large amount of graphics is full of charm and humor, but the scenario is also well thought out. The only drawback is that if you make a bad choice once, the police will immediately come to your aid. The game's difficulty level is low.

3. Get Rich Quick

In this adventure game, the main person who looks like a parody of a popular anime, can't pay this week's rent, so he somehow manages to go out on the town and secure some cash.
The game is flawed by its strange and tasteful graphics and its makeshift scenario, but the work itself is highly attractive and the story is highly complete. The game is not structured as a dead end, so I recommend you to save the game in detail.
There are two different endings, depending on the amount of money you have secured.

2. Manhole

This beautiful game is known by almost all the mac users in 80's.
The detailed graphics in black and white, the animation that exceeds the limits of the technology of 80's era, and the topological composition of the scenes are impressive. The game itself is not that well-designed, but it is really a historical masterpiece of this era. The game has been released in several versions, version 1.0 is the most recommended.

1. Caper in the Castro

The last one is another detective game, and more this game with a homosexual theme. It is probably the first time LGBT game.
Since the game is played by typing in text, not only push the button, the choices on the game tend to be more diverse. As a result, the difficulty level of the game is higher. However, it is a profound game that succeeds in conveying the atmosphere of the time when it was created in 80's. I would like to raise a glass to the author who is able to create something of this caliber through a personal development.

not the ending of game...

Three detective stories were included, but that's just my taste.
For reasons of space, I was only able to introduce the HyperCard game, but I'll introduce a game created with World Builder next time.
See you next time.

How to make an escape game using swiftUI part 4

akira. — Tue, 27 Apr 2021 02:11:17 +0000

About animation

swiftUI has a rich mechanism for expressing animation.
Imagine when you need to animate. In this section, we will create an animated expression with two different impressions to be used when switching screens. First, we said that skeltonUI is a file for opening and ending. Since no other View is called in this file, it supports full animation. You should make an effort to explain the player's situation and how it happened with animations to help them understand your game's world.
You can use the VIewModify mechanism to add or remove animations at any time. Modify can be customized and separated into modules. You can customize the modifiers and separate them into modules, which will improve the visibility of your code.
In this example, we will animate the following two sample images.

import SwiftUI

struct AnimeView: View {
    @State private var flag = false
    var body: some View {
        VStack {
            if flag {
                Image("littelgirl")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                    .transition(.PopMan)  // add custom Modifier
            }

            Button("people event") {
                withAnimation {
                    self.flag.toggle()
                }
            }
        }
    }
}


struct SlowAnimeView: View {
    @State private var flag = false
    var body: some View {
        VStack {
            if flag {
                Image("woman")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)

            }

            Button("people event") {
                withAnimation(.linear(duration: 3.0)) {
                    self.flag.toggle()
                }
            }
        }
    }
}



// Custom Modifier
struct PopManModifier: ViewModifier {
    let size: CGFloat
    let degrees: Double
    func body(content: Content) -> some View {
        content
            .scaleEffect(size)
            .rotationEffect(.degrees(degrees))
    }
}

// extension AnyTransition
extension AnyTransition {
    static var PopMan: AnyTransition {
        AnyTransition.modifier(
            active: PopManModifier(size: 0, degrees: -360),
            identity: PopManModifier(size: 1, degrees: 0)
        )
    }
}

We will compare them without and with this. Comparing the two images, the latter gives the impression that the person is more important than the former. The envelope held by the woman with the bobbed hair doesn't contain much, while the basket held by the girl is presumably hiding an important item. Animation expression is a deep topic, not only in games, so any further effort will be put into individual efforts.

What is debug mode?

In order to make it easier to see, each part has been colored lightly. This is called debug mode. If you remove this, it make the layer transparent, game can turn to be in production mode. It would be cool if we could put all this together in a Utility, and when the time came to switch modes, just by changing a single toggle variable, Bool.

The final product

By coding up to this point, we think we have acquired the minimum methodology required to create an escape game. From here on, it is time to demonstrate your individual ideas.
For your reference, here is a game I made.
However, you may need to be a little more creative to release it to the App Store.

Finally

All this articles was a very quick explanation. There is a lot of code that I haven't written yet. Also, I think the coding was a bit exaggerated for future enhancements. For example, the model types are too large and could be made more concise. In terms of data binding, there are a few areas that need to be reconsidered. There are also some trivial views that should be lumped together. If any of the readers of this article have already developed an escape game individually, please give me your opinion. Also, if you are genuinely skilled in swiftUI, please give me your opinion. I'm trying to figure out the story and puzzle of the game myself.

Also, in terms of functionality, the game should be able to be saved for stage data persistence to avoid irritating the player. This could be done using IOS technology features such as core data. I don't have the time to do that right now.

For my personal taste, the game is entirely in black and white. In fact, all images were created using macdraw pro from the mac9 era. The sample images are all from the old mac era. If you have a mac that can run the classic environment, you can go to the Macintosh Repository and download many of the privately developed games, including the ones shown here. Don't forget to donate when you do so.

Again, the most important thing in an escape game is not the features or the efficient code, but the puzzle solving. This is where the personality of the actual game is reflected. There is no such thing as a design pattern here. Design patterns are only for maintainability of the code, but if most of the development is done by individuals, they are not so important. This genre is not for the up-and-coming data scientist who joins Google, but for the detective novel-addicted coding geek.
If you're reading this, join me in escaping the boredom of the room by heading to this post-Covid19 world.

https://github.com/UD46/HyperEscape/tree/main/dsgame

How to make an escape game using swiftUI part 3

akira. — Tue, 27 Apr 2021 02:02:54 +0000

About zoom In

The next task is the zoomIn zoomOut technique. This is a method where you can click on a location on the screen. The screen will zoom in on that location to get more information about the room. For example, you can look under a desk to see if a key has left on carpet, look up something on a computer screen, or talk to a person.
It may seem like a simple function, but it is very important. Although it seems simple, it is a bit tricky to implement correctly.
This is in reference to the method of placing items.
I call this invisible button a void button. When you press this button, the screen will switch to a different dimension from the east, west, north, and south as before.
So after zooming in, we need to disable the left and right window buttons once they were always visible.

The canvasUI is the file that draws the blueprint for all the game's screen transitions. It is the trunk that binds a number of windows together.
the zoomChainIndex can disable the window buttons.
As I will explain in detail later, we will create a separate Index model for each of these flags, and write a large number of if statements for each flag value in the center of the canvasUI.

CanvasUI.swift

import SwiftUI

struct CanvasUI: View {

    @ObservedObject var itemData = ItemObject.shared
    @ObservedObject var cycle = CycleChain.shared
    @ObservedObject var scriptData = ScriptObject.shared
    @ObservedObject var windowObject = WindowObject.shared
    @ObservedObject var selectTabView = WindowSelect()

    var body: some View {
        ZStack {
            // move to window to window
            if cycle.windowChainIndex == 0 {
                // ZoomIn and ZoomOut
                if cycle.zoomChainIndex == 0 {
                    WindowButton(WWindow: AnyView(W_Window()), NWindow: AnyView(N_Window()), EWindow:  AnyView(E_Window()), SWindow: AnyView(S_Window()))
                } // disable WindowButton
                if cycle.zoomChainIndex == 1 {
                    if windowObject.window.isZoom == true {
                        N_Zoom_Window()
                    }
                    if windowObject.window1.isZoom == true {
                        E_Zoom_Window()
                    }
                }
            }
            // Second Floor
            if cycle.windowChainIndex == 1 {

            }
            // to one way move
            if cycle.windowChainIndex == 2 {
                // scene
            }
            VStack {
                Spacer()
                ItemDock()
            }
        }
    }

It's a bit noisy, but it can't be helped. Also, there is a bug that when you come back from the default zoomOut, you can only return from a certain direction, northward, no matter which direction you came back from, but again, I don't care. If you care about that, you won't be able to play the game for any length of time.

About subtitles

We are slowly finishing up. Since we want to add a textual way of expression in addition to the image-based way, we decided to reserve a place for subtitles to be displayed. So, we will create a script dock above the item dock where the subtitles will be displayed. Eventually, we want to be able to create a text game here. By the way, let's take a look at the bottom half of the screen in the Tools tab. You will notice that the item dock is not exactly glued to the script dock. That's a small detail.

import SwiftUI

struct CanvasUI: View {

    @ObservedObject var itemData = ItemObject.shared
    @ObservedObject var cycle = CycleChain.shared
    @ObservedObject var scriptData = ScriptObject.shared
    @ObservedObject var windowObject = WindowObject.shared
    @ObservedObject var selectTabView = WindowSelect()

    var body: some View {
        ZStack {
            // move to window to window
            if cycle.windowChainIndex == 0 {
                // ZoomIn and ZoomOut
                if cycle.zoomChainIndex == 0 {
                    WindowButton(WWindow: AnyView(W_Window()), NWindow: AnyView(N_Window()), EWindow:  AnyView(E_Window()), SWindow: AnyView(S_Window()))
                } // disable WindowButton
                if cycle.zoomChainIndex == 1 {
                    if windowObject.window.isZoom == true {
                        N_Zoom_Window()
                    }
                    if windowObject.window1.isZoom == true {
                        E_Zoom_Window()
                    }
                }
            }
            // Second Floor
            if cycle.windowChainIndex == 1 {

            }
            // to one way move
            if cycle.windowChainIndex == 2 {
                // scene
            }
            // add to spacing
            VStack(spacing: 0) {
                Spacer()
                ItemDock()
            }
        }
    }

This is due to Apple's default settings. It is to prevent people from creating flat design apps so that they won't mistake it for windows phone. If you want to make this snug and close, you can write the following. Now it is stored properly.
If anyone cares about this, they are either a Microsoft employee or a Nokia employee.

import Foundation


struct ScriptModel : Identifiable {
    var id : Int
    var text : String
    var isAppear : Bool
}

class ScriptObject : ObservableObject {
    static let shared = ScriptObject()
    private init(){}

    @Published var script = ScriptModel(id: 0, text: "This is my 0 script.", isAppear: false)
    @Published var script1 = ScriptModel(id: 1, text: "This is my 1 script.", isAppear: false)
    @Published var script2 = ScriptModel(id: 2, text: "This is my 2 script.", isAppear: false)
    @Published var script3 = ScriptModel(id: 3, text: "This is my 3 script.", isAppear: false)
    @Published var script4 = ScriptModel(id: 4, text: "This is my 4 script.", isAppear: false)
    @Published var script5 = ScriptModel(id: 5, text: "This is my 5 script.", isAppear: false)
    @Published var script6 = ScriptModel(id: 6, text: "This is my 6 script.", isAppear: false)
    @Published var script7 = ScriptModel(id: 7, text: "This is my 7 script.", isAppear: false)
    @Published var script8 = ScriptModel(id: 8, text: "This is my 8 script.", isAppear: false)
    @Published var script9 = ScriptModel(id: 9, text: "This is my 9 script.", isAppear: false)
    @Published var script10 = ScriptModel(id: 10, text: "This is my 10 script.", isAppear: false)
    @Published var script11 = ScriptModel(id: 11, text: "This is my 11 script.", isAppear: false)
    @Published var script12 = ScriptModel(id: 12, text: "This is my 12 script.", isAppear: false)
    @Published var script13 = ScriptModel(id: 13, text: "This is my 13 script.", isAppear: false)
}


import SwiftUI



struct ScriptDock: View {
    @State var script : ScriptModel
    var body: some View {
        ZStack{
            Rectangle()
                .fill(Color.green.opacity(0.3))
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50, maxHeight: 70)
            ScriptText(script: $script)
        }
    }
}


// This view is for script book
struct ScriptText : View {
    @State var flg = true
    @Binding var script : ScriptModel
    @ObservedObject var cycle = CycleChain.shared

    var body: some View {
        if self.flg {
            Text(script.text)
                .onTapGesture {
//                    cycle.scriptChainIndex = script.id
                    self.flg.toggle()
            }
        } else {

        }
    }
}

Subtitles are also modeled and managed separately.
This is because subtitles often need to be modified or reordered afterwards.
If you've ever created subtitles for a video, you'll understand this well. For the nature of subtitles, you will notice that there is a pattern to how this appears.
As shown in the figure below, a script appears in the script dock right after an event, and it can serve as a description of the situation, a line from a character, or a heavenly voice (hint) to reduce the difficulty of the game.
Each script should be tied to a script index number for each event, and either disappear after a certain amount of time or can be removed by tapping the script itself.
There are two types of scripts: those that work by themselves and those that display multiple scripts in succession.
In the case of multiple scripts, you can link the index number to the script number and have it increment by itself. In this case, it is essential to set the default number, i.e. 0, when the long script is finished.

About chainIndex

The same floor with only four views (east, west, north, south, and west) seemed boring to me. So, let's make it so that the user can go up to the upper floor if certain conditions are met. In this case, we need to create a new index that we used for zooming. There are two main types of indexes: multiple and one-way. The first is the window index. This is the index that connects the floor to the floor above. It looks like the figure below.

This is a multiple. Naturally, you can go back and forth between floors, or you can make it one-way. It can also be used as a time trip. from 1980's to 2020's : from Reagan to Trump. The zoomChianIndex we mentioned earlier is also a multiple, because it goes back and forth between In and Out.

Only the last one is one-way. It is a keyChainIndex.
What is the purpose of getting an item in the first place? It is to solve the mystery in front of you. Look at the diagram below.

This is an illustration of how to use Key1 to open a safe, which contains a new key, Key2, to open another safe. It is assumed that the key used cannot be used to open any more safes. Once you have solved the problem, it will make it impossible to go back on the stage. If you don't do this, there may be glitches that the game creator didn't anticipate. This is the most important method throughout the game to guide the player through the story. Although it is important, it is merely an Int-type variable that is allowed to be incremented only.


import Foundation


class CycleChain : ObservableObject {
    static let shared = CycleChain()
    private init(){}

    @Published var windowChainIndex : Int = 0
    @Published var zoomChainIndex : Int = 0
    @Published var animeChainIndex : Int = 0
    // One Way

    @Published var keyChainIndex : Int = 0
    @Published var scriptChainIndex : Int = 0
}

How to make an escape game using swiftUI part 2

akira. — Mon, 26 Apr 2021 11:44:54 +0000

Items in the Window

Next, we're thinking of the life-cycle of items in a game. It is a standard one. Let's refer to the Get rich Quick introduced at part1 of this article.
When you tap on an item that exists in the window, the item disappears from the window and enters the item dock, which is a separate component.
When you want to use that item elsewhere, you can tap the item in the dock to select it.
Next, we need a View to call the instance to place the items that exist on the screen. That is WindowTool.swift

WindowTool.swift

import SwiftUI

struct WindowTool: View {

    @State var putItem : Tool
    @State var Width : CGFloat
    @State var Height : CGFloat
    @State var X : CGFloat
    @State var Y : CGFloat

    var body: some View {
        if !itemData.itemArray.contains(putItem) && !putItem.isTaken {
            {
                Image(putItem.image).resizable()
            }()
            .frame(minWidth: 0 ,maxWidth: Width, minHeight: 0 ,maxHeight: Height)
            .offset(x: X, y: Y) 
            .onTapGesture {
                putItem.isTaken = true
                addItem(item: putItem)
                print(itemData.itemArray)
            }
        } else {

        }
    }
    // to add an item
    func addItem(item: Tool) {
        itemData.itemArray.append(item)
    }

}

We will consider the continuation of the life cycle. What should we do after an item is clicked?

Here we want to create an item dock and code a scene where the item enters the dock after it is clicked.
We will not put any restrictions on the order in which the items are retrieved for now. Let's use a basic array here. We have created an empty Tool type array at the end of the item's object.

Here is the code. The code on the dock side uses the ForEach syntax.

itemDock.swift

import SwiftUI

struct ItemDock: View {


    var body: some View {
        ZStack{
            Rectangle()
                .fill(Color.blue.opacity(0.3))
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50, maxHeight: 70)
            HStack(spacing: 5){
                ForEach(0 ..< itemData.itemArray.count, id: \.self) { index in
                    {
                        Image(itemData.itemArray[index].image).resizable()
                            .frame(minWidth: 0 ,maxWidth: 50, minHeight: 0 ,maxHeight: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                            .background(Color.white)
                            .overlay(
                                Rectangle()
                                    .stroke(itemData.itemArray[index].isSelected ?  Color.red : Color.clear, lineWidth: 5)
                            )
                    }().onTapGesture {
                        itemData.itemArray[index].isSelected.toggle()
                        itemData.itemArray[index].isTaken = true

                    }
                }
            }
        }
    }
}

The item object doesn't exist yet, so I can't test it, but I'll try to figure out how to continue.
When clicked, the isTaken flag of the item will be checked and the item will disappear from the window and be placed in the dock at hand.

When you click on an item in the dock, the isSelected flag of each item is checked and the frame turns red.

Create an object for the item here.

ItemObject.swift

import Foundation


struct Tool : Equatable, Identifiable {
    let id : Int
    var text: String
    var image: String
    var isTaken: Bool
    var isSelected: Bool
}


class ItemObject: ObservableObject {
    // for singleton
    static let shared = ItemObject()
    private init(){}

    @Published var item1 = Tool(id: 1, text: "This is item 1", image: "item1.png", isTaken: false, isSelected: false)
    @Published var item2 = Tool(id: 2, text: "This is item 2", image: "item2.png", isTaken: false, isSelected: false)
    @Published var item3 = Tool(id: 3, text: "This is item 3", image: "item3.png", isTaken: false, isSelected: false)
    @Published var item4 = Tool(id: 4, text: "This is item 4", image: "item4.png", isTaken: false, isSelected: false)
    @Published var item5 = Tool(id: 5, text: "This is item 5", image: "item5.png", isTaken: false, isSelected: false)
    @Published var item6 = Tool(id: 6, text: "This is item 6", image: "item6.png", isTaken: false, isSelected: false)
    @Published var item7 = Tool(id: 7, text: "This is item 7", image: "item7.png", isTaken: false, isSelected: false)
    @Published var item8 = Tool(id: 8, text: "This is item 8", image: "item8.png", isTaken: false, isSelected: false)
    @Published var item9 = Tool(id: 9, text: "This is item 9", image: "item9.png", isTaken: false, isSelected: false)

    // empty arrays
    @Published var itemArray: [Tool] = []



}

We need to add this to the WindowTool we just created.

WindowTool.swift

import SwiftUI

struct WindowTool: View {

    @EnvironmentObject var itemData : ItemObject
    @State var putItem : Tool
    @State var Width : CGFloat
    @State var Height : CGFloat
    @State var X : CGFloat
    @State var Y : CGFloat

    var body: some View {
        if !itemData.itemArray.contains(putItem) && !putItem.isTaken {
            {
                Image(putItem.image).resizable()
            }()
            .frame(minWidth: 0 ,maxWidth: Width, minHeight: 0 ,maxHeight: Height)
            .offset(x: X, y: Y) 
            .onTapGesture {
                putItem.isTaken = true
                addItem(item: putItem)
                print(itemData.itemArray)
            }
        } else {

        }
    }
    // to add an item
    func addItem(item: Tool) {
        itemData.itemArray.append(item)
    }

}

Now, let's shift our attention to the Tools tab. Check the rough sketch in the Tools tab again.
The image of the acquired item will be displayed here in a grid format.
To create a 3*3 grid of items like the sketch, let's use lazyVGrid, which has been added in the latest version.

ToolsTab.swift

import SwiftUI

struct ToolsTab: View {

    @EnvironmentObject var itemData : ItemObject


    var cols = Array(repeating: GridItem(.flexible(), spacing:0), count:3)
    public var body: some View {
        VStack {
            LazyVGrid(columns: cols) {
                ForEach(0 ..< itemData.itemArray.count, id: \.self) { index in
                    {
                        Image(itemData.itemArray[index].image).resizable()
                    }()
                    .frame(minWidth: 100 ,maxWidth: 100, minHeight: 100 ,maxHeight: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .background(Color.white)
                    .overlay(
                        Rectangle()
                            .stroke(itemData.itemArray[index].isSelected ?  Color.red : Color.blue, lineWidth: 5)
                    ).onTapGesture {
                        itemData.itemArray[index].isSelected.toggle()
                        itemData.itemArray[index].isTaken = true
                    }
                }
            }
            Spacer()
            ToolTextPlate()
        }
    }

}

When an item is selected, its description will appear in the dotted palette at the bottom of the screen. These descriptions contain important hints to help you solve the game's puzzles. The selected items refer to the same array as the main item dock, so naturally their flags, etc. are synchronized.
One thing that bothers me here is that when multiple items are selected, the descriptions are displayed overlapping each other. Because of this, I can't read the description of each one.

To solve this problem, we should use an ingenious process such as single selection in the list view, but since it is quite possible to use multiple items at the same time depending on the game settings, and it does not adversely affect the game functionality, we will leave it as it is. No one cares about such things.

about Instance

Next, we will go on to create the items that exist on the screen. We will use the same technique as when we created the window object. The only difference is that we will set a variable as @State to determine the absolute position of the item. This should be easy to understand. There are three ways to use variables.
The code on the window side looks like this. It's well organized and easy to tweak.

import SwiftUI

struct N_Window: View {

    @ObservedObject var windowObject = WindowObject.shared
    @ObservedObject var itemData = ItemObject.shared
    @ObservedObject var scriptData = ScriptObject.shared
    @ObservedObject var cycle = CycleChain.shared



    var body: some View {
        ZStack{
            BackGroundPicture(imageFilename: windowObject.window.image)
            WindowTool(putItem: $itemData.item1, Width: 100, Height: 100, X: 0, Y: 0)
            ZoomInButton(nextWindow: AnyView(N_Zoom_Window()), thisWindow: $windowObject.window, Width: 100, Height: 100, X: 0, Y: 100)
        }

    }

}

It is now complete. You can see the items are displayed beautifully. Now let's test it by tapping on it.

What's going on? Every time I come back to the screen, items that I thought I took are being reproduced over and over again. This glitch is a problem. If this were a blockchain game app that could be redeemed for cash, it would wreak havoc on the company. Why is this happening? I have a hypothesis.
Whenever the screen is redrawn, a new instance is created and overwritten. swiftUI's function is to redraw the view containing the observed variable when it is changed, but thanks to the overwriting of the instance, the changed variable, Bool, etc. are not maintained. The same is true for the view. The same thing happens to the window object, only less noticeably. The same thing happens to window objects, only less conspicuously, but the window can be recreated many times and still be completely invisible to the eye. This kind of instantiation trouble is a basic problem for people with general object-oriented programming experience.

To deal with this problem, we will use the design pattern Singleton. This is a method to limit the number of times an instance can be created. Rewrite all the objects that have created the Model so far.
The code will look like this.

ToolModel.swift

import Foundation


struct Tool : Equatable, Identifiable {
    let id : Int
    var text: String
    var image: String
    var isTaken: Bool
    var isSelected: Bool
}


class ItemObject: ObservableObject {
    //add this
    static let shared = ItemObject()
    private init(){}

    @Published var item1 = Tool(id: 1, text: "This is item 1", image: "item1.png", isTaken: false, isSelected: false)
    @Published var item2 = Tool(id: 2, text: "This is item 2", image: "item2.png", isTaken: false, isSelected: false)
    @Published var item3 = Tool(id: 3, text: "This is item 3", image: "item3.png", isTaken: false, isSelected: false)
    @Published var item4 = Tool(id: 4, text: "This is item 4", image: "item4.png", isTaken: false, isSelected: false)
    @Published var item5 = Tool(id: 5, text: "This is item 5", image: "item5.png", isTaken: false, isSelected: false)
    @Published var item6 = Tool(id: 6, text: "This is item 6", image: "item6.png", isTaken: false, isSelected: false)
    @Published var item7 = Tool(id: 7, text: "This is item 7", image: "item7.png", isTaken: false, isSelected: false)
    @Published var item8 = Tool(id: 8, text: "This is item 8", image: "item8.png", isTaken: false, isSelected: false)
    @Published var item9 = Tool(id: 9, text: "This is item 9", image: "item9.png", isTaken: false, isSelected: false)

    // empty arrays
    @Published var itemArray: [Tool] = []



}

WindowModel.swift

import Foundation



struct WindowModel {
    var id : Int
    var image: String
    var isZoom : Bool
}

class WindowObject : ObservableObject {
    //add this
    static let shared = WindowObject()
    private init(){}

    @Published var window = WindowModel(id: 1, image: "window1", isZoom: false)
    @Published var window1 = WindowModel(id: 2, image: "window2", isZoom: false)
    @Published var window2 = WindowModel(id: 3, image: "window1doordark", isZoom: false)
    @Published var window3 = WindowModel(id: 4, image: "window2door", isZoom: false)
    @Published var window4 = WindowModel(id: 5, image: "window1dark", isZoom: false)
    @Published var window5 = WindowModel(id: 6, image: "window2dark", isZoom: false)
}

And...

import SwiftUI

struct WindowTool: View {

    @ObservedObject var itemData = ItemObject.shared
    @ObservedObject var cycle = CycleChain.shared
    // changed State to Binding
    @Binding var putItem : Tool
    @State var Width : CGFloat
    @State var Height : CGFloat
    @State var X : CGFloat
    @State var Y : CGFloat

    var body: some View {
        if !itemData.itemArray.contains(putItem) && !putItem.isTaken {
            {
                Image(putItem.image).resizable()
            }()
            .frame(minWidth: 0 ,maxWidth: Width, minHeight: 0 ,maxHeight: Height)
            .offset(x: X, y: Y) 
            .onTapGesture {
                putItem.isTaken = true
                addItem(item: putItem)
                print(itemData.itemArray)
            }
        } else {

        }
    }
    // to add an item
    func addItem(item: Tool) {
        itemData.itemArray.append(item)
    }

}

Then we test drive it again.

However, things do not improve. This is actually because with @State, the structure is copied as is, so it can't hold changes in the variable. So we will rewrite @Binding and put a $ mark here. The $ mark is used in situations like this. Then, the situation is settled. By using @Binding and @Published, the data change was reflected in all the views, but I needed to know more about it.
We confirmed that modifying each code as follows would solve this problem. Data flow is a central idea of swiftUI and it is deep. On the contrary, once you understand this idea, you will have nothing to fear from swiftUI.

How to make an escape game using swiftUI part 1

akira. — Mon, 26 Apr 2021 09:09:43 +0000

Hello All The Future Developers !!

Are you an iOS user? And you're not very good at coding? But would you like to create your own apps? And maybe you want to publish it to app store for getting people's attention?

If you want it, join me in creating an escape game. I'll give you a brief explanation so that anyone can create it easily. We'll use the latest verson swiftUI, so you'll be exposed to the new Apple technology. Even if you don't know how it works, I keep the source code available for download on my github, so you can make it your own app only to change the images. I would not take any royalties from your products, even if you make a profit from that game.

First of all, do you know exactly what an escape game or a point & click game is? It is a popular game genre that has known since the era of Apple's HyperCard, and has been created especially by individual developers. Because it does not require high level coding skills according to complex physics algorithms like intuitive action games such as Angry Birds, making it easy for even novice coders to work on. The most important part is a puzzle-solving. For example, finding keys hidden in a room, opening a safe by using that key, or unraveling a mystery from a cryptic document... at end, we can breaking out of a deadlock situation. It would cause a kind of catharsis to the player.

I am creating this in swiftUI. Because it is Apple's official UI framework API and more and more popular, and also it allows us to create apps with smaller byte. You know some game engine platforms such as Unity, but these engine tend to increase the size of the application for its flexibility. Who would want to spend over 300MB download effort on an anonymous developed game app?

In this article, we don't care about a few bugs, we will just keep going, though many detours and bugs may occur again and again. Let's work on it with the attitude that we're going to make that bug a trap in the game story. Please read with a more open mind, not as if you were reading another article on this site.

Draw the whole picture

The first step is to draw out the overall design.
We make a minimum functions and add them when they become necessary in the operation of our game.
There are two tabs: mainTab(CanvasUI) and toolsTab. ToolsTab is the tab where you can see the descriptions of the tools you have acquired.

The code looks like this:

ContentView.swift

import SwiftUI

struct ContentView: View {
        @ObservedObject var selectWindow = WindowSelect()
        var body: some View {
            TabView(selection: $selectWindow.selectTabView) {
                CanvasUI(selectTabView: WindowSelect())
                    .tabItem {
                        Image(systemName: "doc.richtext")
                        Text("Window")
                    }.tag(0)
                ToolsTab()
                    .tabItem {
                        Image(systemName: "info.circle")
                        Text("Tools")
                    }.tag(1)
            }
        }
    }

ToolsTab.swift

import SwiftUI

struct ToolsTab: View {
    var body: some View {
        Text("Hello, World!")
    }
}

WindowSelect.swift

import Foundation

class WindowSelect: ObservableObject {
    @Published var selectTabView = 0
}

CanvasUI.swift

import SwiftUI

struct CanvasUI: View {
    // @ObservedObject variable can only use this view
    @ObservedObject var selectTabView = WindowSelect()
    var body: some View {
        Text("Hello World!")
    }
}

ContentView.swift is a so-called template view. This view is created by default when you start a swiftUI project. Since the "struct" can't hold the changes of its members value, we must insert a "class" in the middle. That is the role of WindowSelect.swift. The third file, CanvasUI.swift, is the one that will play a central role in the game later on. This is basic creating tabs method you can find in any basic swiftUI book.

Now we have a main tab and a tools tab. We now turn attention to the mainTab(CanvasUI).

The buttons on the left and right sides of the screen to switch the view from east to west, north to south, in one room are called window button (see the rough sketch). It is treated as a one component. In the main tab, CanvasUI, write it like this.

WindowButton.swift

import SwiftUI

struct WindowButton: View {
    @State var isShowSub : Int = 0
    var body: some View {
        ZStack {
            if isShowSub == -1 {
                // empty
            }
            if isShowSub == 0 {
                // empty
            }
            if isShowSub == 1 {
                // empty
            }
            if isShowSub == 2 {
                // empty
            }
            HStack {
                Button(action: {
                    print("click Left!")
                    withAnimation() {
                        self.isShowSub -= 1
                        print(isShowSub)
                        // for window loop
                        if isShowSub == -2 {
                            self.isShowSub = 2
                        }
                    }
                })
                {
                    Rectangle()
                        .fill(Color.pink.opacity(0.3))
                        .frame(minWidth: 30, maxWidth: 60, minHeight: 50, maxHeight: .infinity)
                }
                Spacer()
                Button(action: {
                    print("click Right!")
                    withAnimation() {
                        self.isShowSub += 1
                        print(isShowSub)
                        // for window loop
                        if isShowSub == 3 {
                            self.isShowSub = -1
                        }
                    }
                })
                {
                    Rectangle()
                        .fill(Color.pink.opacity(0.3))
                        .frame(minWidth: 30, maxWidth: 60, minHeight: 50, maxHeight: .infinity)
                }
            }
        }
    }
}

The return value of windowButton is "AnyView".
It doesn't care what data type it is, but it returns other view. In this case, it returns the four direction of the room, N, E, W and S.
Then add it to canvasUI.

CanvasUI.swift

import SwiftUI

struct CanvasUI: View {
    // add @EnvironmentObject
    @EnvironmentObject var selectTabView : WindowSelect
    var body: some View {
        WindowButton() // add View Conponent
    }
}

For now, let's just test that the button works as a button. Notice the text printed on the terminal.

It's working fine. However, this printing text behavior does not make any sense. The only way to know if these buttons are capable of transitioning the real window is to create the window itself. We will create a Window Model for the Window Object with the background image and window id, not only for this WindowButtonView but other view we would create later on.

Data flow starting with @

Before we create the WindowModel, we will briefly explain the important things about data binding in swiftUI.

There are three ways to use variables, as follows

@Binding a @State variable.
Passing an @ObservableObject to each View
Using @EnvironmentObject

In all of these cases, by using @Binding and @Published, data changes will be reflected in all Views.

I create an object for each destination screens called just "Window". All view in the app will reference variable and methods in Window, and all data these object have will maintain until the end of the game. The WindowModel is shown below.

WindowObject.swift

import Foundation

struct WindowModel {
    var id : Int
    var image: String
}

class WindowObject : ObservableObject {
    @Published var window = WindowModel(id: 1, image: "window1")
    @Published var window1 = WindowModel(id: 2, image: "window2")
    @Published var window2 = WindowModel(id: 3, image: "window1doordark")
    @Published var window3 = WindowModel(id: 4, image: "window2door")
}

YourAppName.swift

import Foundation
import SwiftUI

@main
struct YourAppNAme: App {

    var body: some Scene {
        WindowGroup {
             // attached to ContentView()
            ContentView().environment(WindowObject())
            }
    }
}

There are various methods for exchanging data on view. Apple has several methods, but I won't explain them in detail here. I've chosen a method called environmentObject because we need to reuse the WindowObject.

I also create four separate windowViews. These are just Window objects that hold different images with different attributes in the four directions of east, west, south, and north.
Before test drive, don't forget to add some new code to the file we created before.
The code for each of them is as follows.

WindowButton.swift

import SwiftUI

struct WindowButton: View {
    @State var isShowSub : Int = 0
    // add some @State variable
    @State var WWindow : AnyView
    @State var NWindow : AnyView
    @State var EWindow : AnyView
    @State var SWindow : AnyView

    var body: some View {
        ZStack {
        // add AnyView to each if statements
            if isShowSub == -1 {
                AnyView(WWindow)
            }
            if isShowSub == 0 {
                AnyView(NWindow)
            }
            if isShowSub == 1 {
                AnyView(EWindow)
            }
            if isShowSub == 2 {
                AnyView(SWindow)
            }
            HStack {
                Button(action: {
                    print("click Left!")
                    withAnimation() {
                        self.isShowSub -= 1
                        print(isShowSub)
                        // for window loop
                        if isShowSub == -2 {
                            self.isShowSub = 2
                        }
                    }
                })
                {
                    Rectangle()
                        .fill(Color.pink.opacity(0.3))
                        .frame(minWidth: 30, maxWidth: 60, minHeight: 50, maxHeight: .infinity)
                }
                Spacer()
                Button(action: {
                    print("click Right!")
                    withAnimation() {
                        self.isShowSub += 1
                        print(isShowSub)
                        // for window loop
                        if isShowSub == 3 {
                            self.isShowSub = -1
                        }
                    }
                })
                {
                    Rectangle()
                        .fill(Color.pink.opacity(0.3))
                        .frame(minWidth: 30, maxWidth: 60, minHeight: 50, maxHeight: .infinity)
                }
            }
        }
    }
}

Write the arguments to the windowButton method in body of CanvasUI View.

CanvasUI.swift

import SwiftUI

struct CanvasUI: View {
    @EnvironmentObject var selectTabView : WindowSelect
    var body: some View {
        WindowButton(WWindow: AnyView(W_Window()), NWindow: AnyView(N_Window()), EWindow:  AnyView(E_Window()), SWindow: AnyView(S_Window()))
    }
}

Also write a method chain in the root view to make an instance of environmentObject.

YourAppName.swift

import Foundation
import SwiftUI

@main
struct YourAppName: App {

    var body: some Scene {
        WindowGroup {
             // attached to ContentView()
            ContentView().environment(WindowObject())
            }
    }
}

Now, here's the four Window.swift file.

N_Window.swift

import SwiftUI

struct N_Window : View {
    @EnvironmentObject var windowObject : WindowObject
    var body: some View {
        Image("windowObject.window1.image")
    }
}

I don't want to hard coding in body variable for future dev. So, I created BackGroundPicture.swift.

BackGroundPicture.view

import SwiftUI

struct BackGroundPicture: View { var imageFilename: String
    var body: some View {
        Image(imageFilename).resizable()
    }
}

Rewrite the body in N_Window.swift, adding ZStack.

N_Window.swift

import SwiftUI

struct N_Window : View {
    @EnvironmentObject var windowObject : WindowObject
    var body: some View {
        ZStack {
            BackGroundPicture(imageFilename: windowObject.window.image)
        }
    }
}

Other three window views is almost same as N_Window.
Please prepare your own background images, but now I use samples I've made.
As a result, screen transition is shown below.

It works beautifully.

Well, that's the end of part 1 of this article.
You can find this project's repository in my github account. I plan to create a branch for each part.
Also, I'll take questions if you don't mind me asking as long as I know what I'm doing. It's always free.
The game is a long way from completion, but I will be writing the rest of the part in a BIG HURRY, come back soon.