2023-08-29 Math App Task 6 - Map

Implementēt /mathapp_2023_q1/frontend Jaunu spēles skatu https://github.com/asya-ai/mathapp-algo

Kodēt branch “toms_dev”

Designs (invites sent) https://www.figma.com/file/cEcBpfXCgl0e7IBqI4bAnX/Algo-Adventures?type=design&node-id=514-67556&mode=design&t=E71YlTcZlTkvxIqy-0

 

Lai pārvietotu karti izmantot React-native PanResponder (nedrīkst izmanto expo-gl utt). Spēlei jābūt saderīgai ar Rive animācijām

 

Zālei / Fonam arī būs visuals, pašlaik var nelikt, bet ieplānot, ka būs

 

image-20230809081728637

Use case scenario

  1. ScreenMap aizstāj ScreenGameSelect.tsx

  2. Initally ielādē no map.json, kuru iepriekš sagatavo ar map editor web aplikāciju

  3. Visi assets kā PNG vai rive (vēlāk) jāglabā kā local assets, neko nedrīkst ielādēt kā base64 vai no servera attēliem šobrīd

  4. Kartē ir vairāki slāņi un collision maps katram elementam pret lāča kāju collision map

  5. Collison maps dalās ar fona grid, kur lācim ceļu plāno starp šūnu pozīcijām

  6. Ja lāča kājas atrodas pa Y asi virs collison map, tad lāci zīmē aiz attēla, ja zem tad virs attēla

  7. Pamēģināt https://play.google.com/store/apps/details?id=com.ea.game.simpsons4_na (simpsons tapped out spēli https://www.youtube.com/watch?v=AgR5JsBUIzg&list=PL_Fy14Dps3CchiHPt9EDIIWalc5aEgNHO) - Interfess, ka ar pirkstu var kustināt karti velkot, ar arī iezīmēt lāci un uzpiežot uz kartes likt lācim iet, izmantojot path finding uz doto pozīciju (pozīcijas snapojas pie neredzama occupancy grid)

  8. Lācis var uzieet arī uz 2 objektiem kartē ūdenskritums (matemātikas spēle, kura jau ir implementēta) un bišu strops (candy crush, kuru implementēs mihails)

  9. Lācis pelna medus punktus matemātikas spēlēs (kuras būs vairāk vēlāk) un tērē izklaides spēlēs un veikalā (Hustler),kur var nopirkt items, kuri ir inventory un uz paša lāča (piem cepure), tāpēc visiem components jābūt max atdalītiem funkcijās/klasēs

  10. Pēc katras darbības, kur lācis dodas vai mainās medus punkti spēle tiek saglabāta, izmantojot ControllerLocalStorage

  11. Spēlētajam ir arī katru dienu 3 dzīvības, ja spēlētājs zaudē 3 spēles (matemātikas vai izklaides spēles) spēlētājam neļauj vairs jaunas spēles spēlēt un lācis guļ

     

Editor

Karti pirms tam izveido, izmantojot ./ map-editor , kurš arī ir iekļauts repo un kuru programmē Asya Artūrs (kontaktus var iedot Anna)

No editor jāspēj eksportēt JSON, kurš Map interface formātā, un ir inital state of map

Model

Pozīcijām un vektoriem izmantot math lib ThreeJS (ar TypeScript @types)

Data structure apmēram šāda - interfaces:

Map
map_id: int,
layers: MapLayer[],
player: Player,
map_position: Vector2D // occupancy_grid => int[,]
map_size: Vector2D
map_zoom_level: float,
map_occupancy_grid: bool[,]
PlayerMap
player: Player,
player_position: Vector2D,
player_movement_target: Vector2D,
direction: EnumDirection,
animation_state: EnumAnimation,
wearable_items_on_player: ShopItem[],
bought_items: ShopItem[],
map_layer_id: int
PlayerGameCandyCrush
player: Player,
PlayerGameArithmetic
player: Player,
Player
lives: int,
honey_points: int,
MapLayer
map_layer_id: int,
order_idx: int
map_items: MapItem[]
MapItem
map_item_id: int,
map_item_type: EnumMapItemType, //objects and background tiles
map_item_position: Vector2D,
map_item_size: Vector2D,
map_item_is_repeatable: bool, // background tiles can be repeated
map_item_is_collidable: bool // ! important
ShopItem
shop_item_id: int,
shop_item_type: EnumShopItem,
is_wearable: bool,
honey_points: int

Map un visi entities glabāsies nākotnē backend, bet sākotnēji var uztaisīt, ka map.json tiek ielādēts app pusē no faila.

 

Controller

Izveidot ControllerMap, kurš apstrādā funkcijas, kad nepieciešams, kaut ko pamainīt map datu struktūrā

 

View

Lācim jau tagad ir pieejamas kustības animācijas rive formātā un arī dažiem objektiem pieejamas animācijas

 

Kartes kostību nodrošina panresponder un style transform (translatex/y/scale). Nedrīkst karti vilkt tālāk par kartes malām, nedrīkst vilkt ārpus kartes robežām ekrāna laukumu.

Lāci un objektus var iezīmēt (sākotnēji var uzlikt kādu glow efektu)

Izveidot ScreenMap, ComponentMapLayer, ComponentMapItem, ComponentPlayer. Visiem Model interaces, kuriem vajag visuals savu component izveidot. Uzejot uz ūdenskrituma (no vienalga kuras puses), atveras math uzdevumu spēle.

Atkarībā no telefona ekrāna rezolūcijas mainās map zoom level (to implementēt ar style->transform->scale). Map position implementēt ar style->transform->translate (veļāk būs ārī panresponder, ka ar 2 pirkstiem varēs zoom)

FYI pirms kartes skata būs onboarding Screens un ScreenMainMenu, tos tagad netaisīt, bet atcerēties, ka tādi būs!

image-20230809083351673

Kartes ceļa plānošanai izmantot A* path finding => occupancy grid (map_occupancy_grid)

Path finding, lai nonāktu no punkta A līdz B izmantot: https://github.com/qiao/PathFinding.js (iespējams vajadzes npm i dev types)

Dzīvības / medus status uz kartes (vienmēr redzams pa virsu kartei stūrītī) image-20230829172105997