### Phaser 3: Player and Camera Setup
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script_old_dolores.html
Initializes the player sprite, sets its physics properties, attaches the camera to follow the player, and configures camera bounds. It also sets up keyboard input for player control.
```javascript
player = this.physics.add.sprite(1856, 288, "atlas", "misa-front").setSize(30, 40).setOffset(0, 0);
player.setDepth(-1);
const camera = this.cameras.main;
camera.startFollow(player);
camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
cursors = this.input.keyboard.createCursorKeys();
```
--------------------------------
### Game Initialization and Variable Setup
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script.html
Initializes the Phaser game instance and sets up global variables for game state, including step count, simulation code, persona data, movement speed, and phase management.
```javascript
let step = parseInt(document.getElementById('step').innerHTML);
let sim_code = document.getElementById('sim_code').innerHTML;
let cursors;
let player;
let showDebug = false;
var spawn_tile_loc = {};
for (var key in persona_names){
spawn_tile_loc[key] = persona_names[key];
}
console.log(spawn_tile_loc);
var personas = {};
var pronunciatios = {};
let anims_direction;
let pre_anims_direction;
let pre_anims_direction_dict = {};
let curr_maze = "the_\n_ville";
let tile_width = 32;
let movement_speed = 32;
let timer_max = 0;
let timer = timer_max;
let phase = "update";
let execute_movement;
let execute_count_max = tile_width/movement_speed;
let execute_count = execute_count_max;
let movement_target = {};
```
--------------------------------
### Start Django Environment Server
Source: https://github.com/joonspk-research/generative_agents/blob/main/README.md
Starts the Django development server for the environment. This server hosts the simulation environment and must be running for the agent simulations to interact with it. Access the environment via a web browser.
```bash
python manage.py runserver
```
--------------------------------
### Player and Camera Setup (JavaScript)
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script.html
This code sets up the main player character with physics properties and positions it in the game world. It then configures the game camera to follow the player and sets the camera's boundaries to match the map dimensions. Input for player movement is also captured using cursor keys.
```javascript
player = this.physics.add.sprite(800, 288, "atlas", "misa-front").setSize(30, 40).setOffset(0, 0);
player.setDepth(-1);
const camera = this.cameras.main;
camera.startFollow(player);
camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
cursors = this.input.keyboard.createCursorKeys();
```
--------------------------------
### HTML for Setting Background Color
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/static_dirs/assets/the_ville/visuals/300 random hex and decimal color codes - Entrylevelprogrammer.com.html
This HTML snippet demonstrates how to set the background color of a web page using a hex color code. It includes basic HTML structure and a style attribute on the body tag.
```html
Color FDB932
This is a test.
```
--------------------------------
### Player Sprite and Camera Setup (JavaScript)
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/demo/main_script.html
This code sets up the main player sprite with physics, disabling its collision with the map's collision layer to allow free movement. It then configures the game camera to follow the player sprite and sets the camera bounds to match the map's dimensions. Keyboard input for movement is also initialized.
```javascript
player = this.physics.add.sprite(2400, 588, "atlas", "down").setSize(30, 40).setOffset(0, 0);
player.setDepth(-1);
const camera = this.cameras.main;
camera.startFollow(player);
camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
cursors = this.input.keyboard.createCursorKeys();
```
--------------------------------
### Setup Character Animations (Phaser)
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script.html
Configures walking animations for a character named 'misa' in both forward and backward directions using Phaser's animation manager. It generates frame names from an atlas with specific prefixes, start/end frames, and zero-padding, setting the frame rate and enabling repeat.
```javascript
anims.generateFrameNames("atlas", { prefix: "misa-front-walk.", start: 0, end: 3, zeroPad: 3 }), frameRate: 4, repeat: -1 });
anims.create({
key: "misa-back-walk",
frames: anims.generateFrameNames("atlas", {
prefix: "misa-back-walk.",
start: 0,
end: 3,
zeroPad: 3
}),
frameRate: 4,
repeat: -1
});
}
```
--------------------------------
### Run Generative Agent Simulation Server
Source: https://github.com/joonspk-research/generative_agents/blob/main/README.md
Executes the main Python script to start the simulation server for generative agents. This script manages the agent logic and interactions within the simulated environment.
```bash
python reverie.py
```
--------------------------------
### Persona Sprite Creation and Animation Setup (JavaScript)
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/demo/main_script.html
This snippet iterates through defined spawn locations to create individual persona sprites. Each persona is given a physics body, size, offset, and display scaling. It also creates associated speech bubbles and text elements (pronunciations) positioned above each persona, setting their depths. Finally, it initiates the creation of walking animations for each persona based on their names.
```javascript
for (let i=0; i` with the desired integer. One step is 10 seconds in-game.
```shell
run
```
--------------------------------
### Game State and Persona Variables
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script_old_dolores.html
Initializes global variables for game state, player control, persona data, movement speed, timers, and simulation phases. Includes specific spawn locations for personas.
```javascript
let cursors;
let player;
let showDebug = false;
var spawn_tile_loc = {};
spawn_tile_loc["Dolores Murphy"] = [58, 9]
spawn_tile_loc["Maeve Jenson"] = [38, 12]
var personas = {};
var pronunciatios = {};
let anims_direction;
let pre_anims_direction;
let curr_maze = "dolores_double_studio_new";
let tile_width = 32;
let movement_speed = 32;
let timer_max = 0;
let timer = timer_max;
let phase = "update";
let execute_movement;
let execute_count_max = tile_width/movement_speed;
let execute_count = execute_count_max;
let movement_target = {};
let step = parseInt(document.getElementById('step').innerHTML);
let sim_code = document.getElementById('sim_code').innerHTML;
```
--------------------------------
### Initialize Character Animations (JavaScript)
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/demo/main_script.html
Sets up walking animations for characters in four directions (left, right, up, down). Each animation uses a sequence of frames generated from sprite sheets and is configured to loop indefinitely.
```javascript
anims.create({ key: left_walk_name, frames: anims.generateFrameNames(persona_name, { prefix: "left-walk.", start: 0, end: 3, zeroPad: 3 }), frameRate: 4, repeat: -1 }); anims.create({ key: right_walk_name, frames: anims.generateFrameNames(persona_name, { prefix: "right-walk.", start: 0, end: 3, zeroPad: 3 }), frameRate: 4, repeat: -1 }); anims.create({ key: down_walk_name, frames: anims.generateFrameNames(persona_name, { prefix: "down-walk.", start: 0, end: 3, zeroPad: 3 }), frameRate: 4, repeat: -1 }); anims.create({ key: up_walk_name, frames: anims.generateFrameNames(persona_name, { prefix: "up-walk.", start: 0, end: 3, zeroPad: 3 }), frameRate: 4, repeat: -1 });
```
--------------------------------
### Phaser 3 Game Configuration
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script.html
Sets up the core configuration for a Phaser 3 game, including rendering mode, dimensions, parent container, pixel art settings, physics, and scene definitions (preload, create, update).
```javascript
const config = {
type: Phaser.AUTO,
width: 1500,
height: 800,
parent: "game-container",
pixelArt: true,
physics: {
default: "arcade",
arcade: {
gravity: { y: 0 }
}
},
scene: { preload: preload, create: create, update: update }
};
```
--------------------------------
### Phaser 3 Game Configuration
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/demo/main_script.html
Defines the global settings for the Phaser 3 game instance, including rendering type, dimensions, parent container, physics, and scene management. This configuration is essential for initializing the game.
```javascript
const config = {
type: Phaser.AUTO,
width: 1500,
height: 800,
parent: "game-container",
pixelArt: true,
physics: {
default: "arcade",
arcade: {
gravity: { y: 0 }
}
},
scene: { preload: preload, create: create, update: update },
scale: {zoom: 0.8}
};
```
--------------------------------
### Persona Initialization from HTML
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script.html
Parses persona names and their initial positions from `` elements within the DOM. It populates a `persona_names` object with persona names as keys and their [x, y] coordinates as values.
```javascript
let spans = document.getElementById('persona_init_pos').getElementsByTagName('span');
let persona_names = {};
for(var i = 0, l = spans.length; i < l; i++){
let x = spans[i].innerText.split(",");
persona_names[x[0]] = [parseInt(x[1]), parseInt(x[2])]
}
```
--------------------------------
### Load Images and Tilemap in Phaser
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/demo/main_script.html
Preloads various image assets, including map tilesets and character textures, and a Tiled JSON tilemap. This function prepares the game environment by loading all necessary visual components before the game scene is created.
```javascript
this.load.image("interiors_pt5", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt5.png' %}");
this.load.image("CuteRPG_Field_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_B.png' %}");
this.load.image("CuteRPG_Field_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_C.png' %}");
this.load.image("CuteRPG_Harbor_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Harbor_C.png' %}");
this.load.image("CuteRPG_Village_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Village_B.png' %}");
this.load.image("CuteRPG_Forest_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Forest_B.png' %}");
this.load.image("CuteRPG_Desert_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Desert_C.png' %}");
this.load.image("CuteRPG_Mountains_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Mountains_B.png' %}");
this.load.image("CuteRPG_Desert_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Desert_B.png' %}");
this.load.image("CuteRPG_Forest_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Forest_C.png' %}");
this.load.tilemapTiledJSON("map", "{% static 'assets/the_ville/visuals/the_ville_jan7.json' %}");
```
--------------------------------
### Phaser 3.0 Asset Preloading
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/path_tester/main_script.html
Loads various image assets required for the game, such as map tilesets and interior assets. Each `this.load.image` call registers an image with a unique key, allowing it to be referenced later in the game.
```javascript
function preload() {
this.load.image("blocks_1", "{% static 'assets/the_ville/visuals/map_assets/blocks/blocks_1.png' %}");
this.load.image("walls", "{% static 'assets/the_ville/visuals/map_assets/v1/Room_Builder_32x32.png' %}");
this.load.image("interiors_pt1", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt1.png' %}");
this.load.image("interiors_pt2", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt2.png' %}");
this.load.image("interiors_pt3", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt3.png' %}");
this.load.image("interiors_pt4", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt4.png' %}");
this.load.image("interiors_pt5", "{% static 'assets/the_ville/visuals/map_assets/v1/interiors_pt5.png' %}");
this.load.image("CuteRPG_Field_B", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_B.png' %}");
this.load.image("CuteRPG_Field_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_C.png' %}");
this.load.image("CuteRPG_Harbor_C", "{% static 'assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Harbor_C.png' %}");
this.load.image("CuteRPG_Village_B", "{% static 'ass
```
--------------------------------
### Phase Transition and UI Update in JavaScript
Source: https://github.com/joonspk-research/generative_agents/blob/main/environment/frontend_server/templates/home/main_script_old_dolores.html
This JavaScript code handles the transition to the 'process' phase after all personas have completed their movement. It also updates the user interface by populating elements with 'current_action', 'target_address', and 'chat' content for each persona. The code iterates through personas, extracts relevant data, and dynamically sets the innerHTML of corresponding DOM elements.
```javascript
// Once we are done moving the personas, we move on to the "process" // stage where we will send the current locations of all personas at // the end of the movemments to the frontend server, and then the backend. for (let i=0; i