how to make a 2048 game via swiftUI [closed] - animation

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I try to make a 2048 game via SwiftUI, my game logics are mostly correct, but the transitions/Animations were wrong, I don't know where are the problems and how to fix them!
The game now looks like this :
the game acting gif
I have several questions:
It looks like when the tile moves to left or top, the transition was hidden behind the gray background view, I try to add ZIndex to the tile and background, but it's not working.
How to make a sequenced transition, it should first moved from the origin cell, then scale itself from larger to normal
The merged transition not working every time as I expected, in fact it only happens a few times
My view code looks like this:
struct GameView: View {
#ObservedObject var viewModel:GameViewModel
var body: some View {
let tap = DragGesture().onEnded({value in self.move(by: value)})
return GeometryReader{geo in
ZStack{
RoundedRectangle(cornerRadius: 10.0).fill(Color(#colorLiteral(red: 0.719702065, green: 0.6819230318, blue: 0.6252140403, alpha: 1)))
VStack{
ForEach(0..<self.viewModel.gridSize){rowIndex in
HStack {
ForEach(self.viewModel.tiles[rowIndex]){tile in
TileView(tile:tile)
}
}
}
}
.padding()
}
.gesture(tap)
.frame(width: geo.size.width, height: geo.size.width, alignment: .center)
}
}
func move(by value:DragGesture.Value){
withAnimation(Animation.easeInOut.speed(2)){
if abs(value.translation.height) > abs(value.translation.width){
if value.translation.height > 30 {
self.viewModel.move(by:GameModel.Direction.down)
}else if value.translation.height < -30{
self.viewModel.move(by:GameModel.Direction.up)
}
}else{
if value.translation.width > 30 {
self.viewModel.move(by:GameModel.Direction.right)
}else if value.translation.width < -30{
self.viewModel.move(by:GameModel.Direction.left)
}
}
}
}
}
struct TileView: View {
var tile:GameModel.Tile
var body: some View {
GeometryReader { geometry in
self.body(for: geometry.size)
}
}
#ViewBuilder
private func body(for size:CGSize) -> some View {
ZStack{
RoundedRectangle(cornerRadius: 10.0).fill(Color(#colorLiteral(red: 0.794301331, green: 0.7563138604, blue: 0.7084676027, alpha: 1)))
if(tile.value != 0){
ZStack{
RoundedRectangle(cornerRadius: 10.0).fill(tile.bgColor)
Text(String(tile.value)).font(Font.system(size: fontSize(for: size,in: tile.value))).foregroundColor(tile.fontColor)
}
.transition(transition(for: size))
.zIndex(100)
}
}.zIndex(98)
}
private let cornerRadius:CGFloat = 10.0
private let edgeLineWidth:CGFloat = 3
private func fontSize(for size: CGSize, in value:Int) -> CGFloat{
size.width * 0.7 / CGFloat(String(value).count)
}
private func transition(for size:CGSize) -> AnyTransition{
var transition:AnyTransition
if let mergedFrom = tile.mergedFrom{
let perviousTile = mergedFrom[0]
let offset = CGSize(width: CGFloat(perviousTile.x - tile.x )*size.width, height: CGFloat(perviousTile.y - tile.y )*size.height)
transition = AnyTransition.offset(offset).combined(with: AnyTransition.scale(scale: 2))
}else{
if let previousPosition = tile.previousPosition {
let offset = CGSize(width: CGFloat(previousPosition.x - tile.x )*size.width, height: CGFloat(previousPosition.y - tile.y )*size.height)
transition = AnyTransition.offset(offset)
}else{
transition = AnyTransition.scale
}
}
return AnyTransition.asymmetric(insertion: transition.animation(.easeInOut), removal: .identity)
}
}
and the model code:
struct GameModel {
private(set) var tiles: Array<Array<Tile>>
private(set) var gridSize:Int
init(gridSize:Int){
self.gridSize = gridSize
tiles = Array<Array<Tile>>()
for i in 0..<gridSize{
var row = Array<Tile>()
for j in 0..<gridSize{
row.append(Tile(x: j, y: i))
}
tiles.append(row)
}
generateTile()
generateTile()
}
private mutating func generateTile(){
var emptyPositionArr:Array<(x:Int,y:Int)> = []
for rowIndex in 0..<gridSize{
for colIndex in 0..<gridSize{
if(tiles[rowIndex][colIndex].value == 0){
emptyPositionArr.append((x:colIndex,y:rowIndex))
}
}
}
if let randomPos = emptyPositionArr.randomElement() {
let randomValue = Bool.random() ? 2 : 4
tiles[randomPos.y][randomPos.x].value = randomValue
}else{
print("No remaining spaces!")
}
}
mutating func prepareTiles(){
for y in 0..<gridSize{
for x in 0..<gridSize{
if(tiles[y][x].value != 0){
tiles[y][x].mergedFrom = nil
// tiles[y][x].savePosition()
}
}
}
}
mutating func move(by direction:Direction){
let vector:(x:Int,y:Int) = getVector(by: direction)
var moved = false
prepareTiles()
var col:Array<Int> = []
var row:Array<Int> = []
for i in 0...3{
col.append(i)
row.append(i)
}
if(vector.x == 1){
col = col.reversed()
}
if(vector.y == 1){
row = row.reversed()
}
for y in row{
for x in col{
let cell = Cell(x: x, y: y)
var newCell:Cell
let tile = tiles[y][x]
if(tile.value != 0){
let positions = findFarthestPosition(cell: cell, vector: vector)
if let next = cellCotent(at: positions.next), next.value == tile.value, next.mergedFrom == nil{
let merged = Tile(x: next.x, y: next.y, value: tile.value * 2, mergedFrom: [tile,next])
insertTile(tile: merged)
removeTile(tile: tile)
newCell = Cell(x: next.x, y: next.y)
}else{
removeTile(tile: tile)
insertTile(tile: Tile(x: positions.farthest.x, y: positions.farthest.y, value: tile.value,previousPosition: cell))
newCell = Cell(x: positions.farthest.x, y: positions.farthest.y)
}
if(newCell.x != cell.x || newCell.y != cell.y){
moved = true
}
}
}
}
if(moved){
generateTile()
}
}
func findFarthestPosition(cell: Cell,vector:(x:Int,y:Int)) -> (farthest:Cell,next:Cell){
var previous:Cell
var currentcell = cell
repeat{
previous = currentcell
currentcell = Cell(x: previous.x + vector.x, y: previous.y + vector.y)
}while(withinBounds(cell: currentcell) && cellAvailable(cell: currentcell) )
return (previous,currentcell)
}
func getVector(by direction:Direction) -> (x:Int,y:Int){
var x = 0;
var y = 0;
switch direction {
case .down:
y = 1
case .up:
y = -1
case .left:
x = -1
case .right:
x = 1
}
return (x:x,y:y)
}
//MARK: - Cell
struct Cell {
var x:Int
var y:Int
}
func cellCotent(at cell:Cell) -> Tile? {
if(withinBounds(cell: cell)){
return tiles[cell.y][cell.x]
}else{
return nil
}
}
func cellAvailable (cell:Cell) -> Bool {
if(withinBounds(cell: cell)){
return tiles[cell.y][cell.x].value == 0
}else{
return false
}
}
func withinBounds(cell:Cell) -> Bool {
return cell.x >= 0 && cell.x < self.gridSize && cell.y >= 0 && cell.y < gridSize
}
mutating func insertTile(tile:Tile){
tiles[tile.y][tile.x] = tile
}
mutating func removeTile(tile:Tile){
tiles[tile.y][tile.x].value = 0
tiles[tile.y][tile.x].mergedFrom = nil
tiles[tile.y][tile.x].previousPosition = nil
}
mutating func moveTile(tile:Tile,cell:Cell){
tiles[tile.y][tile.x].value = 0
tiles[tile.y][tile.x].mergedFrom = nil
tiles[cell.y][cell.x] = tile
}
//MARK: - Tile
struct Tile: Identifiable{
var x:Int
var y:Int
var value:Int = 0
var mergedFrom:Array<Tile>?
var previousPosition:Cell?
var bgColor:Color{
get{
if(value > 2048){
return Color(.black)
}else{
return GameModel.ColorMap[value]!}
}
}
var fontColor:Color{
get{
if(value <= 4){
return Color(.black)
}else{
return Color(.white)
}
}
}
var id: Int{
get{
(y*10) + x
}
}
mutating func savePosition(){
self.previousPosition = Cell(x: x, y: y)
}
}
static let ColorMap = [
0:Color(#colorLiteral(red: 0.8036968112, green: 0.7560353875, blue: 0.7039339542, alpha: 1)),
2: Color(#colorLiteral(red: 0.9316522479, green: 0.8934505582, blue: 0.8544340134, alpha: 1)),
4: Color(#colorLiteral(red: 0.9296537042, green: 0.8780228496, blue: 0.7861451507, alpha: 1)),
8: Color(#colorLiteral(red: 0.9504186511, green: 0.6943461895, blue: 0.4723204374, alpha: 1)),
16: Color(#colorLiteral(red: 0.9621869922, green: 0.6018956304, blue: 0.3936881721, alpha: 1)),
32:Color(#colorLiteral(red: 0.9640850425, green: 0.49890697, blue: 0.3777080476, alpha: 1)),
64: Color(#colorLiteral(red: 0.9669782519, green: 0.406899184, blue: 0.2450104952, alpha: 1)),
128: Color(#colorLiteral(red: 0.9315031767, green: 0.8115276694, blue: 0.4460085034, alpha: 1)),
256: Color(#colorLiteral(red: 0.9288312197, green: 0.7997121811, blue: 0.3823960423, alpha: 1)),
512: Color(#colorLiteral(red: 0.9315162301, green: 0.783490479, blue: 0.3152971864, alpha: 1)),
1024: Color(#colorLiteral(red: 0.9308142066, green: 0.7592952847, blue: 0.179728806, alpha: 1)),
2048: Color(#colorLiteral(red: 0.9308142066, green: 0.7592952847, blue: 0.179728806, alpha: 1)),
]
enum Direction {
case up
case down
case left
case right
}
}
viewmodel:
class GameViewModel: ObservableObject {
#Published private(set) var model: GameModel = GameViewModel.createGame()
private static func createGame () -> GameModel {
return GameModel(gridSize: 4)
}
//MARK: - Access to the model
var tiles:Array<Array<GameModel.Tile>> {
model.tiles
}
var gridSize:Int {
model.gridSize
}
//MARK: - Intent(s)
func move(by direction:GameModel.Direction){
model.move(by: direction)
}
}
My source code was uploaded at github, please someone help me

Answer 1

That happens because the tiles are being moved to a position where their Z position is lower than the rows "in the way"
You can separate the background from the tile, so you be sure that the tiles are always on top:
var body: some View {
let tap = DragGesture().onEnded({value in self.move(by: value)})
return GeometryReader{geo in
ZStack{
RoundedRectangle(cornerRadius: 10.0).fill(Color(#colorLiteral(red: 0.719702065, green: 0.6819230318, blue: 0.6252140403, alpha: 1)))
VStack{
ForEach(0..<self.viewModel.gridSize){ rowIndex in
HStack {
ForEach(0..<self.viewModel.gridSize){ columnIndex in
RoundedRectangle(cornerRadius: 10.0).fill(Color(#colorLiteral(red: 0.794301331, green: 0.7563138604, blue: 0.7084676027, alpha: 1))).transition(.identity)
}
}
}
}
.padding()
VStack{
ForEach(0..<self.viewModel.gridSize){rowIndex in
HStack {
ForEach(self.viewModel.tiles[rowIndex]){tile in
TileView(tile:tile)
}
}
}
}
.padding()
}
.gesture(tap)
.frame(width: geo.size.width, height: geo.size.width, alignment: .center)
}
}