Code Monkey home page Code Monkey logo

simplegridview's Introduction

Simple Grid View

A grid view (the kind of symmetrical grid you'd use for a pathfinding application or a game of some sort) based around UIKit and SpriteKit. I am currently working on a visual pathfinder (https://github.com/ggu/Pathfinder) in Swift with this as a base, separate from any sort of pathfinding AI.

The Code

  • TileView is a UIView subclass that stores a Tile and handles active and inactive state changes (the defaults I have set for this app, but you might have various states like inactive, target, obstacle, start etc..). The tile width, height, and margins are also managed here.

  • GridView is another UIView subclass that handles a 2D list of TileView and manages the touches. Touches are currently handled here (e.g. you tap or swipe over TileViews and modify their state). I am not sure if I would be able to handle the touches in TileView, which would be ideal but touchesmoved is currently stopping me from doing that as touchesmoved holds onto the original view, and would not be called on other TileViews. If your app does not depend on swipes over the grid, then I might move the touches functionality to the TileView to obstract more away from GridView. traverseGrid is the core method you will use to update tile states for some condition (e.g. when swiping, does tile frame contain swipe location?) or for applying a state to the entire grid, otherwise accessing the tile you need directly with grid[x][y] makes the most sense.

  • TileNode is the SKSpriteNode subclass equivalent to TileView.

  • GridNode is the SKSpriteNode subclass equivalent to GridView.

  • Tile is a struct that is meant to hold the properties that your application's logic would want to track. If this were for a game, a tile might have a property for its height on your map (e.g. forests are of height 1, mountains are of height 10 etc) to tie into your game's formula for unit movement. Or if you were strictly pathfinding, you might add a property just for risk. As far as a Tile's State goes, this is for tracking the possible states of your tile. Maybe it could be an obstacle, or a dynamic obstacle with some risk. Or even your goal tile. For now, tiles are strictly represented as active or new/inactive.

  • Constants.swift houses some of the main values you might want to edit (colors, possible tile states). One very important enum is Condition. You will pass in a Condition type into traverseGrid as well as a value that can be of any type and these together will allow you to use traverseGrid flexibly to do a variety of things (maybe you want to check if the tile has risk < 10 for your pathfinding, so you could create a Condition case for risk and then you could add another switch case within traverseGrid so that if your Condition is risk, you could pass in a value for risk and check the tile's risk against the unwrapped optional risk value passed into traverseGrid).

Usage

UIKit:

Drag and drop GridView.swift, TileView.swift, Coordinate.swift, Constants.swift and Tile.swift into your project or add as a submodule (see: https://github.com/ggu/Pathfinder).

And then wherever you need a grid:

let gridView = GridView(size: gridSize)
view.addSubview(gridView)

SpriteKit:

Drag and drop GridNode.swift, TileNode.swift, Coordinate.swift, Constants.swift and Tile.swift into your project or add as a submodule (see: https://github.com/ggu/Pathfinder).

And then wherever you need a grid in your SKScene:

let gridNode = GridNode(size: gridSize)
gridNode.position = CGPointZero
gridNode.anchorPoint = CGPointZero
addChild(gridNode)

Simple demo

The demo is not really representative of what this is meant to be used for, but it's there so you can see at a glance what this looks like with the default constants.

To Do

  • support for panning around a grid larger than the screen

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.