Difference between revisions of "Rot.js tutorial"

From RogueBasin
Jump to navigation Jump to search
(Linked to the Node.js version on GitHub.)
 
(7 intermediate revisions by one other user not shown)
Line 1: Line 1:
== Ananas aus Caracas: a sample game built using rot.js ==
== Ananas aus Caracas: a sample game built using rot.js ==


Welcome to this tutorial! We are going to create a very simple roguelike game, playable in any modern browser. To achieve this, our language of choice would be [[JavaScript]]; to simplify our work, we are going to use the [[rot.js|rot.js toolkit]].
Welcome to this tutorial! We are going to create a very simple roguelike game, playable in any modern browser. To achieve this, our language of choice will be [[JavaScript]]; to simplify our work, we are going to use the [[rot.js|rot.js toolkit]].


This tutorial covers creation of a game to be played in a web browser. [http://github.com/blinkdog/ananas-aus-caracas-node See here] for a version of the game ported to Node.js so it can be played in a terminal emulator.


=== Why Python? ===
=== Requirements ===


Most people familiar with this language will tell you it's fun!  Python aims to be simple but powerful, and very accessible to beginners.  This tutorial would probably be much harder without it. We recommend that you install Python 2.7 and go through at least the first parts of the [http://docs.python.org/tutorial/ Python Tutorial]. (Note for Windows 7 64-bits users: install the 32-bits version, since the 64-bits version of Python seems to cause problems with libtcod.) This tutorial will be much easier if you've experimented with the language first. Remember that the [http://docs.python.org/library/index.html Python Library Reference] is your friend -- the standard library has everything you might need and when programming you should be ready to search it for help on any unknown function you might encounter.
* Basic JavaScript knowledge
* Modern web browser (Firefox, Chrome, Opera, Safari, IE9+)


Version 3.x of Python (version 3.3.0 as of this writing) will not work with this tutorial due to difference with how it handles Unicode strings.
=== Game setting ===


PyPy is a version of Python which can be significantly faster at numerical calculations. This tutorial works with PyPy 1.9, but it's actually slower than 2.7 because we hand off all the heavy duty number crunching like line-of-sight calculations to a C++ library. You might want to consider using PyPy if you write a roguelike which doesn't use a library, but that's outside the scope of this tutorial.
The tutorial consists of three chapters, which gradually add more and more functionality. The game itself is pretty simple: motivated by [https://www.youtube.com/watch?v=z4dMkYUlrR8 this video], a player needs to find an ''ananas'' (pineapple) hidden within several boxes in an underground dungeon. It is necessary to find the ananas before Pedro (the ananas owner) finds and punishes you for sneaking into his warehouse.


=== Why libtcod? ===
=== Tutorial contents ===


If you haven't seen it in action yet, check out the [http://doryen.eptalys.net/libtcod/features/ features] and [http://doryen.eptalys.net/libtcod/projects/ some projects] where it was used successfully. It's extremely easy to use and has tons of useful functions specific to RLs.
'''NOTE:''' Working code samples from this tutorial are hosted at jsfiddle.net and use rot.js from GitHub. Please note that GitHub is '''not''' a CDN; you should use your own servers to host all the necessary files.


The tutorial uses libtcod 1.5.1. If you would prefer to use version 1.5.0, follow the link at the top of each lesson and code page for the older version.
* '''[[rot.js tutorial, part 1|Part 1: Basics, map]]'''
*: Create the basic data structures, initialize the output area, generate and draw the map


== Other languages ? ==
* '''[[rot.js tutorial, part 2|Part 2: Asynchronous game engine, player character]]'''
*: Introduce the player character, add it to the engine/scheduler, let it move around


A (partial, work in progress) C++ port of this tutorial can be found [http://codeumbra.eu/complete-roguelike-tutorial-using-c-and-libtcod-part-1-setting-up here].
* '''[[rot.js tutorial, part 3|Part 3: Interaction, Pedro]]'''
*: Let the player open boxes (to make the game winnable); implement Pedro and his pathfinding (to make the game losable)




==Start the tutorial==
Follow the first link to get started!
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 1|Part 1: Graphics]]'''
*: Start your game right away by setting up the screen, printing the stereotypical @ character and moving it around with the arrow keys.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 2|Part 2: The object and the map]]'''
*: This introduces two new concepts: the generic object system that will be the basis for the whole game, and a general map object that you'll use to hold your dungeon.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 3|Part 3: The dungeon]]'''
*: Learn how to code up a neat little dungeon generator.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 4|Part 4: Field-of-view and exploration]]'''
*: Display the player's field-of-view (FOV) and explore the dungeon gradually (also known as fog-of-war).
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 5|Part 5: Preparing for combat]]'''
*: Place some orcs and trolls around the dungeon (they won't stay there for long!). Also, deal with blocking objects and game states, which are important before coding the next part.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 6|Part 6: Going Berserk!]]'''
*: Stalking monsters, fights, splatter -- need we say more?
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 7|Part 7: The GUI]]'''
*: A juicy Graphical User Interface with status bars and a colored message log for maximum eye-candy. Also, the infamous "look" command, with a twist: you can use the mouse.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 8|Part 8: Items and Inventory]]'''
*: The player gets to collect ("borrow") items from the dungeon and use them, with a neat inventory screen. More items added in the next part.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 9|Part 9: Spells and ranged combat]]'''
*: The player's strategic choices increase exponentially as we add a few magic scrolls to the mix. Covers damage and mind spells, as well as ranged combat.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 10|Part 10: Main menu and saving]]'''
*: A main menu complete with a background image and the ability to save and load the game.
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 11|Part 11: Dungeon levels and character progression]]'''
*: Let the player venture deeper into the dungeon and grow stronger, including experience gain, levels and raising stats!
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 12|Part 12: Monster and item progression]]'''
*: Deeper dungeon levels become increasingly more difficult! Here we create tools for dealing with chances and making them vary with level.
==Extras==
Some stuff that is entirely optional and didn't make it in; check this out if you finished the tutorial and are looking for some modifications and improvements to your game -- some are easy, others are more advanced.
* '''[[Complete Roguelike Tutorial, using Python+libtcod, extras#A neat Python shortcut for Notepad++|A neat Python shortcut for Notepad++]]'''
*: For Notepad++ users, how to set up a shortcut to help you debugging.
* '''[[Complete Roguelike Tutorial, using Python+libtcod, extras#Old-school wall and floor tiles|Old-school wall and floor tiles]]'''
*: Using characters in tiles, without getting weird graphical glitches. This is actually very simple.
* '''[[Complete Roguelike Tutorial, using Python+libtcod, extras#Real-time combat|Real-time combat]]'''
*: A speed system to change the tutorial's turn-based combat to real-time!
* '''[[Complete Roguelike Tutorial, using python+libtcod, extras scrolling code|Scrolling maps]]'''
*: Placeholder page for the scrolling map code. Tutorial text will be written soon.
* '''[[Complete Roguelike Tutorial, using Python+libtcod, extras#Creating a Binary|Creating a Binary]]'''
*: Package and deliver your game the nice way!
==Credits==
Code and tutorial written by João F. Henriques (a.k.a. Jotaf). Thanks go out to George Oliver for helping with the layout, sections rearrangement, and syntax highlighting; Teddy Leach for his text reviews; and all the folks in the libtcod forums for their valuable feedback!
Feel free to stop by the [http://doryen.eptalys.net/forum/index.php?board=20.0 libtcod/Python forum] or the [http://doryen.eptalys.net/forum/index.php?topic=328.0 forum on this tutorial] if you're stuck, to show your own project, or just to say hi! It's always cool to get some feedback on the tutorial, and hear about other roguelikes in development.


[[Category: Developing]]
[[Category: Developing]]

Latest revision as of 13:06, 20 March 2015

Ananas aus Caracas: a sample game built using rot.js

Welcome to this tutorial! We are going to create a very simple roguelike game, playable in any modern browser. To achieve this, our language of choice will be JavaScript; to simplify our work, we are going to use the rot.js toolkit.

This tutorial covers creation of a game to be played in a web browser. See here for a version of the game ported to Node.js so it can be played in a terminal emulator.

Requirements

  • Basic JavaScript knowledge
  • Modern web browser (Firefox, Chrome, Opera, Safari, IE9+)

Game setting

The tutorial consists of three chapters, which gradually add more and more functionality. The game itself is pretty simple: motivated by this video, a player needs to find an ananas (pineapple) hidden within several boxes in an underground dungeon. It is necessary to find the ananas before Pedro (the ananas owner) finds and punishes you for sneaking into his warehouse.

Tutorial contents

NOTE: Working code samples from this tutorial are hosted at jsfiddle.net and use rot.js from GitHub. Please note that GitHub is not a CDN; you should use your own servers to host all the necessary files.

  • Part 1: Basics, map
    Create the basic data structures, initialize the output area, generate and draw the map
  • Part 3: Interaction, Pedro
    Let the player open boxes (to make the game winnable); implement Pedro and his pathfinding (to make the game losable)
Retrieved from "http://roguebasin.com/index.php?title=Rot.js_tutorial&oldid=40055"