Tag: #mariomaker

Added the Y tile lines for the game

editor.py

for row in range(rows + 1):
            y = origin_offset.y + row * TILE_SIZE
            pygame.draw.line(self.display_surface, LINE_COLOR, (0,y), (WINDOW_WIDTH,y))

Same as x, but it makes lines horizontal from the left to the right of the window

This is what the it should look like. The y tile lines will be horizontal, and the x tile lines will be vertical.

Result:

Tried to make the lines green so it will look better and…

oh boy…

Okay I took out the green and made the lines a little transparent.

Changing the mouse cursor

Changed the mouse cursor to this:

What we need in order to change the mouse is to find the clickable area, which would be somewhere around the tip of the mouse, the rest is the attached stuff to it.

main.py

surf = load('.//graphics//cursor//mouse.png').convert_alpha()
		cursor = pygame.cursors.Cursor((0,0), surf)
		pygame.mouse.set_cursor(cursor)

We load the image in, then we set where it should be clickable. In this case, it’s (o,0). After that, we replace the mouse with the cursor that we have.

result:

Creating the menu

To make the menu work, in editor.py we’ll have a variable called selection_index that will have value between 2 and 18. Each number represents a certain kind of tile in the editor.

Ex. 2: water, 3; terrain, 4: gold coin and so on.

The selection_index can be changed by clicking on the menu or via hotkeys (this is where that colossal file settings.py comes in).

settings.py

# general setup
TILE_SIZE = 64
WINDOW_WIDTH = 1280
WINDOW_HEIGHT = 720
ANIMATION_SPEED = 8

# editor graphics 
EDITOR_DATA = {
	0: {'style': 'player', 'type': 'object', 'menu': None, 'menu_surf': None, 'preview': None, 'graphics': '../graphics/player/idle_right'},
	1: {'style': 'sky',    'type': 'object', 'menu': None, 'menu_surf': None, 'preview': None, 'graphics': None},
	
	2: {'style': 'terrain', 'type': 'tile', 'menu': 'terrain', 'menu_surf': '../graphics/menu/land.png',  'preview': '../graphics/preview/land.png',  'graphics': None},
	3: {'style': 'water',   'type': 'tile', 'menu': 'terrain', 'menu_surf': '../graphics/menu/water.png', 'preview': '../graphics/preview/water.png', 'graphics': '../graphics/terrain/water/animation'},
	
	4: {'style': 'coin', 'type': 'tile', 'menu': 'coin', 'menu_surf': '../graphics/menu/gold.png',    'preview': '../graphics/preview/gold.png',    'graphics': '../graphics/items/gold'},
	5: {'style': 'coin', 'type': 'tile', 'menu': 'coin', 'menu_surf': '../graphics/menu/silver.png',  'preview': '../graphics/preview/silver.png',  'graphics': '../graphics/items/silver'},
	6: {'style': 'coin', 'type': 'tile', 'menu': 'coin', 'menu_surf': '../graphics/menu/diamond.png', 'preview': '../graphics/preview/diamond.png', 'graphics': '../graphics/items/diamond'},

	7:  {'style': 'enemy', 'type': 'tile', 'menu': 'enemy', 'menu_surf': '../graphics/menu/spikes.png',      'preview': '../graphics/preview/spikes.png',      'graphics': '../graphics/enemies/spikes'},
	8:  {'style': 'enemy', 'type': 'tile', 'menu': 'enemy', 'menu_surf': '../graphics/menu/tooth.png',       'preview': '../graphics/preview/tooth.png',       'graphics': '../graphics/enemies/tooth/idle'},
	9:  {'style': 'enemy', 'type': 'tile', 'menu': 'enemy', 'menu_surf': '../graphics/menu/shell_left.png',  'preview': '../graphics/preview/shell_left.png',  'graphics': '../graphics/enemies/shell_left/idle'},
	10: {'style': 'enemy', 'type': 'tile', 'menu': 'enemy', 'menu_surf': '../graphics/menu/shell_right.png', 'preview': '../graphics/preview/shell_right.png', 'graphics': '../graphics/enemies/shell_right/idle'},
	
	11: {'style': 'palm_fg', 'type': 'object', 'menu': 'palm fg', 'menu_surf': '../graphics/menu/small_fg.png', 'preview': '../graphics/preview/small_fg.png', 'graphics': '../graphics/terrain/palm/small_fg'},
	12: {'style': 'palm_fg', 'type': 'object', 'menu': 'palm fg', 'menu_surf': '../graphics/menu/large_fg.png', 'preview': '../graphics/preview/large_fg.png', 'graphics': '../graphics/terrain/palm/large_fg'},
	13: {'style': 'palm_fg', 'type': 'object', 'menu': 'palm fg', 'menu_surf': '../graphics/menu/left_fg.png',  'preview': '../graphics/preview/left_fg.png',  'graphics': '../graphics/terrain/palm/left_fg'},
	14: {'style': 'palm_fg', 'type': 'object', 'menu': 'palm fg', 'menu_surf': '../graphics/menu/right_fg.png', 'preview': '../graphics/preview/right_fg.png', 'graphics': '../graphics/terrain/palm/right_fg'},

	15: {'style': 'palm_bg', 'type': 'object', 'menu': 'palm bg', 'menu_surf': '../graphics/menu/small_bg.png', 'preview': '../graphics/preview/small_bg.png', 'graphics': '../graphics/terrain/palm/small_bg'},
	16: {'style': 'palm_bg', 'type': 'object', 'menu': 'palm bg', 'menu_surf': '../graphics/menu/large_bg.png', 'preview': '../graphics/preview/large_bg.png', 'graphics': '../graphics/terrain/palm/large_bg'},
	17: {'style': 'palm_bg', 'type': 'object', 'menu': 'palm bg', 'menu_surf': '../graphics/menu/left_bg.png',  'preview': '../graphics/preview/left_bg.png',  'graphics': '../graphics/terrain/palm/left_bg'},
	18: {'style': 'palm_bg', 'type': 'object', 'menu': 'palm bg', 'menu_surf': '../graphics/menu/right_bg.png', 'preview': '../graphics/preview/right_bg.png', 'graphics': '../graphics/terrain/palm/right_bg'},
}

NEIGHBOR_DIRECTIONS = {
	'A': (0,-1),
	'B': (1,-1),
	'C': (1,0),
	'D': (1,1),
	'E': (0,1),
	'F': (-1,1),
	'G': (-1,0),
	'H': (-1,-1)
}

LEVEL_LAYERS = {
	'clouds': 1,
	'ocean': 2,
	'bg': 3,
	'water': 4,
	'main': 5
}

# colors 
SKY_COLOR = '#ddc6a1'
SEA_COLOR = '#92a9ce'
HORIZON_COLOR = '#f5f1de'
HORIZON_TOP_COLOR = '#d1aa9d'
LINE_COLOR = 'black'

what we will need are the indexes 2-18. 0 and 1 are ignored b/c 0 is the player and 1 is the sky. They will also be in the editor so they don’t need to be created.

2-18 the player can create like the terrain, coin, etc…

Making the hotkeys for the menu

editor.py

def selection_hotkeys(self, event):
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_RIGHT:
                self.selection_index += 1
            if event.key == pygame.K_LEFT:
                self.selection_index -= 1

Detects if the user is pressing a button. It’s not checking if we’re holding down a button so there’s no need for a timer.

The problem is that when you repeatedly press the button the number can go below 0 and above 18.

Above 18 when pressing right arrow.

Below 0 when pressing left arrow.

To fix it we just needed one line of code.

editor.py

self.selection_index = max(2,min(self.selection_index,18))

This will cap the max at 18 and the min at 2.

Building the menu

First, we’ll create the general area of the menu.

In the menu area we’ll have smaller squares the user can click on.

menu.py

size = 180
margin = 6

The width and height of the menu will be size. The left and top of the menu will be the WINDOW_WIDTH – size – margin.

Then we draw it on the window.

menu.py

pygame.draw.rect(self.display_surface, 'blue', self.rect)

The menu took a little bit for me b/c there was something wrong with the place of the rectangle. It kept going offscreen (I put a random number for one of the window dimensions instead of its variable).

Made the scroll wheel move the origin up, down, left and right

editor.py

if event.type == pygame.MOUSEWHEEL:
            if pygame.key.get_pressed()[pygame.K_LCTRL]:
                self.origin.y -= event.y * 50
            else:
                self.origin.x -= event.y * 50

Allows the origin to move or right WITHOUT holding down left CTRL and up or down when holding down left CTRL.

Without holding down left CTRL:

Holding down left CTRL:

That’s really it for the pan input. Nothing extremely complex. Later on we’ll have to add more stuff, but for now this is good.

Drawing the tile lines to find what location we are in the grid

Making the tile lines should be infinite and relative to the origin point.

All of the lines should start at the position 0 (start of the window) and end at the height (the bottom) of the window. The x position for the top and bottom of the line should be the same.

Very rough sketch of what I’m trying to explain:

We would find this out by this code:

editor.py

for col in range(cols):
            x = self.origin.x + col * TILE_SIZE
            pygame.draw.line(self.display_surface, LINE_COLOR, (x,0), (x,WINDOW_HEIGHT))

Let’s say that the position of the origin point is (0,0). We would be getting that from self.origin.x. x = 0. We then add that to the column (which is 0) and then multiply by the TILE_SIZE (which will always be 64). The answer to that equation will be 0, which will be the line at the left side of the window.

if col is 1 and we multiply that by 64, we’ll get 64, which will move from the first point to the point to the right and so on until we reach the end of the columns.

If we run it, this is our result:

When you move the origin point the lines will move with it.

There’s a problem though. We run out of points when we move and there’s just a giant empty white space. The same thing happens when you move the origin point to the left.

What we have to do is make sure that the lines are always on the display and that we’re never running out of lines.

We will have to create columns between the origin’s position and the next column so that we can move the origin wherever we want (and so they don’t go out the window).

To do this, we have to divide origin_offset with the TILE_SIZE. Let’s say it is 100. We divide that by the TILE_SIZE (64) and then multiply that number by the TILE_SIZE, which would be 1, which means we’re in the 1st column. Same thing for y.

editor.py

origin_offset = vector(
        offset_vector.x - int(self.origin.x / TILE_SIZE)* TILE_SIZE, 
        y = self.origin.y - int(self.origin.y / TILE_SIZE)* TILE_SIZE)

Result:

That’s all I did. Keep in mind that this tutorial is over 10 hours long…

Created the origin to follow the mouse by holding the middle mouse button.

editor.py

import pygame, sys 
from settings import *
from pygame.math import Vector2 as vector
from pygame.mouse import get_pressed as mouse_buttons
from pygame.mouse import get_pos as mouse_pos

class Editor:
    def __init__(self):

        # main setup 
        self.display_surface = pygame.display.get_surface()
        
        # navigation
        self.origin = vector()
        self.pan_active = False
        
        
    def event_loop(self):
        
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            self.pan_input(event)		

----------------------------------------- look between these
    def pan_input(self, event):
        '''checks if middle button is pressed'''
        if event.type == pygame.MOUSEBUTTONDOWN and mouse_buttons()[1]:
            self.pan_active = True

        if not mouse_buttons()[1]:
            self.pan_active = False
            #panning update
        if self.pan_active:
            self.origin = mouse_pos()
  ------------------------------------- look between these
    def run(self, dt):
        self.display_surface.fill('white')
        self.event_loop()
        pygame.draw.circle(self.display_surface, 'blue', self.origin, 10)

The code between the dotted lines is what makes the origin move by holding down the mouse button.

Result:

Origin in the middle.

Origin on the left.

And the origin on the right.

There is a slight problem with this. The origin follows where the mouse’s position is. For example. If the mouse is at the bottom right-hand corner of the screen and the origin is on the top left-hand corner of the screen and the user presses the middle mouse button, the origin will go from its original position to the mouse’s position.

If we keep this, it will get pretty confusing later when we progress making the game, especially having different tiles and objects all around the screen.

The BETTER way to move the origin.

editor.py

def pan_input(self, event):
        '''checks if middle button is pressed'''
        if event.type == pygame.MOUSEBUTTONDOWN and mouse_buttons()[1]:
            self.pan_active = True
            self.pan_offset = vector(mouse_pos()) - self.origin
        if not mouse_buttons()[1]:
            self.pan_active = False
            
            #panning update
        if self.pan_active:
            self.origin = vector(mouse_pos()) - self.pan_offset

The bolded lines of code helps with making it better to move the origin.

What you get from the first bolded line of code is the distance between the origin and the mouse position.

To use it you subtract the mouse_pos() with the pan_offset to get the distance IF the pan_active is true.

The teal x is the origin. The yellow one is the mouse. vector(mouse_pos()) – self.origin calculates the distance (in pink) between the mouse_pos() and the origin.

self.origin = vector(mouse_pos()) – self.pan_offset creates an offset of the pan when holding down the middle mouse button. This will move the origin point WITHOUT moving the origin point with the mouse (aka. clicking on it).

Result:

When moving the mouse, the origin will move with it, but not follow its exact position.

Ignore my chicken scratch. It’s hard writing with a right-handed mouse when you’re left-handed :/