Code Monkey home page Code Monkey logo

tic80-typescript's Introduction

TSC-80 - TypeScript for the TIC-80


The documentation for TSC-80 1.0 is available here - Projects created for TSC-80 1.0 are incompatible with 2.0


Write your TIC-80 PRO games in TypeScript.

TSC-80 contains all the functions declarations (.d.ts) for the TIC-80 API, and will compile your TypeScript code in JavaScript to inject it into your TIC-80 cart.

Installation and usage

Pre-requisites

This tool has been tested with TIC-80 version 1.2.x (pro edition) on Windows 10, and should work on all platforms compatible with TIC-80 and TypeScript.

  1. Install NodeJS LTS
  2. Install TypeScript: npm install -g typescript
  3. Install TSC-80: npm install -g tic80-typescript

Create a project

  1. tsc80 init will create the necessary files (config, declarations, and game files) into the current directory
  2. Set the correct values inside the tsc80-config.json

Configuration

You need to complete the tsc80-config.json for each project.

{
  "ticExecutable": "path/to/tic/executable/file", // The file path to your TIC executable.
  "entry": "main.ts", // The entry point of your game's code
  "outfile": "build/output.js", // Path to bundled file. You should not have to change this.
  "minify": false // If you want to minify your build. May provide very slight performances improvements
}

Run TSC-80

  • $ tsc80 build will build your game into the "build" directory
  • $ tsc80 run will build, watch the changes, and launch your game through TIC-80

Once that TIC-80 is running, all code changes in .ts files will be reflected after a reload (ctrl+r). You can update and save your assets directly in TIC-80.

Workflow

$ tsc80 run continuously watches changes in your .ts files and compiles them on the fly. You then alt-tab to TIC-80, and hit ctrl+r to reload the game. This instructs TIC-80 to load game.js and inject the compiled code inside the cart.

โ— You must not edit the compiled JavaScript code inside the TIC-80 editor. Your changes would be overwritten.

You must only edit assets (sprites, map, sounds, music) inside the TIC-80 editor. Don't forget to save your changes before reloading the code.

When you hit ctrl+s inside TIC-80, game.js is saved as a standalone TIC-80 cart.

Version control

The build folder can be ignored, but you must commit game.js, since it contains all non-code assets.

Code & Modules

If you know TypeScript and modern web development, writing your TIC-80 game with TSC-80 should be straightforward. It uses esbuild to compile and bundle the code, targets ES2020 and uses the modern ESM syntax (import & export).

tsc80 build|run only transpiles your TypeScript files to JavaScript, and compiles them together as a single output file. Internally, TIC-80 uses QuickJS as its JavaScript engine.

The following limitations apply:

  • JS code up to ES2020. This tool does not provide polyfills.
  • ! No export from your entry file
  • Required to have a single file output
  • Tree-shaking is disabled, as esbuild would strip important "unused" functions like TIC()

Issues

TIC-80 doesn't reload my code

If you're building TIC-80 yourself, make sure to use the correct settings

$ cd <path-to-tic>/build
$ cmake -G "Visual Studio 16 2019" -DBUILD_PRO=On -DCMAKE_BUILD_TYPE=MinSizeRel ..
$ cmake --build . --config MinSizeRel --parallel

Changelog

2.0.0 - 2024-02-16 - BREAKING CHANGES

  • Projects created for TSC-80 1.0 must be refactored to be compatible with 2.0
  • Builds are now done with esbuild, instead of tsc
  • Projects now use ESM, with import and export

1.1.0 - 2023-08-18

  • Formal tsconfig update to output ES2020 code for TIC-80 1.1.x

1.0.3 - 2023-08-09

  • Dependencies update

1.0.1 - 2022-06-22

  • Cleaner code
  • Fixed race condition by @tmountain

1.0.0 - 2022-05-15

  • Official release for TIC-80 1.0
  • Added ttri()

1.0.0-dev - 2021-08-19

  • Refactoring to make this tool compatible with TIC-80 1.0.x-dev
  • Simplified workflow
  • Added peek1(), peek2(), poke1(), poke2(), vbank()

0.4.9 - 2021-07-17

  • Added elli(), ellib(), and trib()

0.4.8 - 2021-04-19

  • Fixed mouse() signature

0.4.7 - 2021-04-08

  • Removing "use strict" from output file, since it breaks the global scope in TIC-80 engine.
  • Updated dependencies
  • Stricter TypeScript
  • Better documentation

0.4.6 - 2021-04-03

  • Cleaned a bit of code
  • Added information in README
  • compress and mangle now default to true

0.4.5 - 2020-06-15

  • Added new function declarations (up-to-date with TIC version 0.80)
  • Added jsdocs for all functions. Thanks a lot @miltoncandelero

0.4.3 - 2019-01-17

  • Fixed the return types of multiple functions
  • Updated the boilerplate code to meet TS standards

0.4.2 - 2018-04-19

  • Added key(), keyp() and reset() declarations
  • Updated the boilerplate code for latest TIC-80 version
  • Updated README for better, step-by-step instructions

0.4.1 - 2017-10-13

  • Fixed missing input support (thanks @matanegui)
  • Fixed tsc80 cmd help message

0.4 - 2017-10-08

  • Added textri() declaration

0.3 - 2017-08-05

  • Refactored code

0.2 - 2017-08-04

  • Making a real npm package

2017-07-31

  • Added a backup option to copy your cart to your project's folder

2017-07-29

  • Updated print() and spr() declarations

2017-07-27

  • Added exit() declaration to tic.d.ts
  • Updated README.md

2017-07-19

  • Updated tic.d.ts

2017-07-11

  • Compile from TS to JS (finally...)
  • Renamed "main.ts" to "sample.ts"
  • Described a small trick to ensure that the init code waits for its dependencies
  • Removed the require of the compiled file
  • Cleared README a bit

2017-07-09

  • Added a require of the compiled code to catch exceptions
  • Added uglify-js to compress the compiled code
  • Rewrote the launch script

2017-07-06

  • Project birth: created a definitions file for TIC-80, and a tsconfig.json

tic80-typescript's People

Contributors

chris-mingay avatar mcincu avatar miltoncandelero avatar robloach avatar scambier avatar tmountain avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

tic80-typescript's Issues

Project structure

Hi there, first off thanks for this project it sounds like exactly what I'm after.

Not an issue with your work, more my own inexperience with typescript but I've fallen at the first hurdle, I'm not sure how I go about referencing classes in different files. Are you able to provide any pointers?

Instinctively I wanted to do something like

./src/Thing.ts

export class Thing {

    name: string;

    constructor(_name: string){
        this.name = _name;
    }

}

main.ts

// title:  game title
// author: game developer
// desc:   short description
// script: js

import { Thing } from './src/Thing';

let t = 0
let x = 96
let y = 24

let items: Thing[] = [
  new Thing("Chris"),
  new Thing("Bob"),
  new Thing("Freddie")
]

function TIC() {
  if (btn(0)) y--
  if (btn(1)) y++
  if (btn(2)) x--
  if (btn(3)) x++
  cls(13)
  spr(1 + (((t % 60) / 30) | 0) * 2, x, y, 14, 3, 0, 0, 2, 2)
  print("HELLO WORLD 2!", 84, 84)

  let tY = 0;
  items.forEach(item => {
    print(item.name, 0, tY);
    tY+=10;
  })

  t++
}

When I try tsc80 run I get

"src/Thing.ts(1,14): error TS6131: Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'.\r\n",

If I set the module to amd in tsconfig.json the application compiles but from within TIC80 I get

image

If I set the module to system in tsconfig.json the application compiles but from within TIC80 I get

image

Thanks

Missing option to specify input type

Hello, @scambier ! First of all I'd like to thank you for the tool, I've just started to use it and it's really cool. Great work!

It seems like here's currently no way to specify the input type for the cart in the tsc80-config.json file. I had to change it to "mouse" and tried setting it in the file but the metadata field was not being added in the output code.

In my case, I found a workaround: editing line 105 to add the "input" option:

preamble: `// title: ${cGame['title']}\n// author: ${cGame['author']}\n// desc: ${cGame['desc']}\n// script: js\n// input: ${cGame['input']}\n`

After this, I added the input field to the tsc80-config.json file with the other metadata and it worked.

I'm not sure how's the contributing status for this project in particular, but if this is indeed a bug, I can send a PR to with this fix if you're alright with it. For now I'll just leave this here.

Best regards!

Adding jsdoc to the declarations

I am adding the corresponding jsdoc to the declarations in tic.d.ts so we have the same documentation as in the wiki inside our editor (vscode in my case).

I will PR soon. I hope you are still alive <3

Unable to build/run

whenever i try to build by running tsc80 build or tsc80 run i always get this issue

PS D:\tic80\test> tsc80 build
Compiling TypeScript...
'tsc' is not recognized as an internal or external command,
operable program or batch file.
node:child_process:926
    throw err;
    ^

Error: Command failed: tsc
'tsc' is not recognized as an internal or external command,
operable program or batch file.

    at checkExecSyncError (node:child_process:851:11)
    at Object.execSync (node:child_process:923:15)
    at compile (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\bin\tsc80.js:120:23)
    at compileAndRun (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\bin\tsc80.js:114:9)
    at build (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\bin\tsc80.js:110:9)
    at Command.<anonymous> (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\bin\tsc80.js:24:5)
    at Command.listener [as _actionHandler] (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\node_modules\commander\index.js:922:31)
    at Command._parseCommand (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\node_modules\commander\index.js:1503:14)
    at Command._dispatchSubcommand (C:\Users\AEPBS\AppData\Roaming\npm\node_modules\tic80-typescript\node_modules\commander\index.js:1443:18) {
  status: 1,
  signal: null,
  output: [
    null,
    "'tsc' is not recognized as an internal or external command,\r\n" +
      'operable program or batch file.\r\n'
  ],
  pid: 9132,
  stdout: '',
  stderr: "'tsc' is not recognized as an internal or external command,\r\n" +
    'operable program or batch file.\r\n'
}

Node.js v18.7.0

i dont know why this happens and i havent been able to fix it

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.