mirror of
https://github.com/sehugg/8bitworkshop.git
synced 2024-11-22 14:33:51 +00:00
285 lines
17 KiB
HTML
285 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<title>8bitworkshop</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
if (window.location.host.endsWith('8bitworkshop.com')) {
|
|
ga('create', 'UA-54497476-9', 'auto');
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('send', 'pageview');
|
|
}
|
|
</script>
|
|
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<span class="navbar-brand"><a target="_new" href="https://twitter.com/8bitworkshop" class="twitter-follow-button" data-show-count="false">Follow @8bitworkshop</a></span>
|
|
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
<a class="navbar-brand" href="./blog/">Blog</a>
|
|
<a class="navbar-brand" href="https://www.amazon.com/default/e/B01N7J10NF/ref=dp_byline_cont_pop_book_1" target="_blank" onclick="ga('send', 'event', 'books', 'click');">Books</a>
|
|
</div>
|
|
<div id="navbar" class="hidden-sm hidden-xs">
|
|
<form class="navbar-form navbar-right">
|
|
<a class="btn btn-default" href="redir.html?" role="button">Continue to 8bitworkshop IDE
|
|
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
<div class="col-md-6">
|
|
<h1>Write 8-bit code in your browser.</h1>
|
|
<p>
|
|
Ever wanted to be an old-school game programmer?<br>
|
|
Learn how classic game hardware worked.</br>
|
|
Write code and see it run instantly.
|
|
</p>
|
|
<p><a class="btn btn-primary btn-lg" href="redir.html?" role="button">Continue to 8bitworkshop IDE
|
|
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
|
|
</a></p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<br><br>
|
|
<img class="img-responsive" src="images/ide_screenshot1.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=vcs">Atari 2600</a></h2>
|
|
<p>
|
|
Learn how to program the
|
|
<a href="redir.html?platform=vcs">Atari 2600</a>
|
|
with dozens of fully commented examples.
|
|
Our 6502 assembler runs as you type and flags any errors.
|
|
We've got debugging tools too; single step through your code and use our CPU Cycle Analyzer to
|
|
develop that perfect Stella kernel.
|
|
</p>
|
|
<img class="img-responsive" src="images/atarivcs.jpg">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2>Arcade Games</h2>
|
|
<p>
|
|
You can develop your own games on classic arcade game hardware, using our in-browser C compiler targeting the Z80 CPU.
|
|
Platforms include
|
|
<a href="redir.html?platform=vicdual">VIC Dual</a>,
|
|
<a href="redir.html?platform=mw8080bw">Midway 8080</a>,
|
|
<a href="redir.html?platform=galaxian-scramble">Galaxian/Scramble</a>,
|
|
<a href="redir.html?platform=vector-z80color">Atari Vector</a>,
|
|
and
|
|
<a href="redir.html?platform=williams-z80">Williams</a>.
|
|
<img class="img-responsive" src="images/arcadegames.jpg">
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p>
|
|
We're always adding new things here, so subscribe to our mailing list for updates!
|
|
</p>
|
|
<style> .gumroad-follow-form-embed { zoom: 1; } .gumroad-follow-form-embed:before, .gumroad-follow-form-embed:after { display: table; line-height: 0; content: ""; } .gumroad-follow-form-embed:after { clear: both; } .gumroad-follow-form-embed * { margin: 0; border: 0; padding: 0; outline: 0; box-sizing: border-box !important; float: left !important; } .gumroad-follow-form-embed input { border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; font-family: -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 20px; background: #fff; border: 1px solid #ddd; border-right: 0; color: #aaa; padding: 10px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02); background-position: top right; background-repeat: no-repeat; text-rendering: optimizeLegibility; font-smoothing: antialiased; -webkit-appearance: none; -moz-appearance: caret; width: 65% !important; height: 40px !important; } .gumroad-follow-form-embed button { border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); -webkit-transition: all .05s ease-in-out; transition: all .05s ease-in-out; display: inline-block; padding: 11px 15px 12px; cursor: pointer; color: #fff; font-size: 15px; line-height: 100%; font-family: -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #36a9ae; border: 1px solid #31989d; filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5ccfd4, endColorstr=#329ca1, GradientType=0)"; background: -webkit-linear-gradient(#5ccfd4, #329ca1); background: linear-gradient(to bottom, #5ccfd4, #329ca1); height: 40px !important; width: 35% !important; } </style> <form action="https://gumroad.com/follow_from_embed_form" class="form gumroad-follow-form-embed" method="post"> <input name="seller_id" type="hidden" value="1507538753888"> <input name="email" placeholder="Your email address" type="email"> <button data-custom-highlight-color="" type="submit">Subscribe</button> </form>
|
|
<p></p>
|
|
<!-- Begin MailChimp Signup Form -->
|
|
<!--
|
|
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
|
|
<style type="text/css">
|
|
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
|
|
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
|
|
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
|
|
</style>
|
|
<div id="mc_embed_signup">
|
|
<form action="https://8bitworkshop.us19.list-manage.com/subscribe/post?u=819ee5274c8c9c1afe2005023&id=75411a270f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
|
<div id="mc_embed_signup_scroll">
|
|
<h2>We're always adding new things here, so subscribe to our mailing list for updates!</h2>
|
|
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
|
|
<div class="mc-field-group">
|
|
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
|
|
</label>
|
|
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
|
|
</div>
|
|
<div class="mc-field-group">
|
|
<label for="mce-FNAME">First Name (optional)</label>
|
|
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
|
|
</div>
|
|
<div class="mc-field-group">
|
|
<label for="mce-LNAME">Last Name (optional)</label>
|
|
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
|
|
</div>
|
|
<div id="mce-responses" class="clear">
|
|
<div class="response" id="mce-error-response" style="display:none"></div>
|
|
<div class="response" id="mce-success-response" style="display:none"></div>
|
|
</div>
|
|
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_819ee5274c8c9c1afe2005023_75411a270f" tabindex="-1" value=""></div>
|
|
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
|
|
-->
|
|
<!--End mc_embed_signup-->
|
|
</div>
|
|
<!--
|
|
<div class="col-md-4">
|
|
<h2>Hardware Design</h2>
|
|
<p>
|
|
Software not enough for you?
|
|
Use our
|
|
<a href="redir.html?platform=verilog">Verilog</a>
|
|
compiler to design a 8-bit game platform from scratch.
|
|
We'll run your design in real time in the browser, showing the output on a simulated CRT.
|
|
Plenty of examples are available to teach logic programming.
|
|
</p>
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
<h1 class="text-center">Learn More With a Book!</h1>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<a target="_blank" href="https://www.amazon.com/gp/product/1541021304/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1541021304&linkCode=as2&tag=pzp-20&linkId=c149f6365c0a676065eb6d7c5f8dd6ae" onclick="ga('send', 'event', 'books', 'click', 'vcs');">
|
|
<img class="img-responsive" border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1541021304&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=pzp-20" ></a>
|
|
<img src="//ir-na.amazon-adsystem.com/e/ir?t=pzp-20&l=am2&o=1&a=1541021304" />
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a target="_blank" href="https://www.amazon.com/gp/product/1541021304/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1541021304&linkCode=as2&tag=pzp-20&linkId=c149f6365c0a676065eb6d7c5f8dd6ae" onclick="ga('send', 'event', 'books', 'click', 'vcs');">
|
|
<h3>Making Games For The Atari 2600</h3>
|
|
</a>
|
|
<p>The Atari 2600 was released in 1977, and now there's finally a book about how to write games for it! You'll learn about the 6502 CPU, NTSC frames, scanlines, cycle counting, players, missiles, collisions, procedural generation, pseudo-3D, and more. While using the manual, take advantage of our Web-based IDE to write 6502 assembly code, and see your code run instantly in the browser. We'll cover the same programming tricks that master programmers used to make classic games. Create your own graphics and sound, and share your games with friends!</p>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<a target="_blank" href="https://www.amazon.com/gp/product/1545484759/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1545484759&linkCode=as2&tag=pzp-20&linkId=2f3c42111bffe3466830939fff4053fc" onclick="ga('send', 'event', 'books', 'click', 'arcade');">
|
|
<img class="img-responsive" border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1545484759&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=pzp-20" ></a>
|
|
<img src="//ir-na.amazon-adsystem.com/e/ir?t=pzp-20&l=am2&o=1&a=1545484759" />
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a target="_blank" href="https://www.amazon.com/gp/product/1545484759/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1545484759&linkCode=as2&tag=pzp-20&linkId=2f3c42111bffe3466830939fff4053fc" onclick="ga('send', 'event', 'books', 'click', 'arcade');">
|
|
<h3>Making 8-Bit Arcade Games in C</h3>
|
|
</a>
|
|
<p>With this book, you'll learn all about the hardware of Golden Age 8-bit arcade games produced in the late 1970s to early 1980s. We'll learn how to use the C programming language to write code for the Z80 CPU. The following arcade platforms are covered: * Midway 8080 (Space Invaders) * VIC Dual (Carnival) * Galaxian/Scramble (Namco) * Atari Color Vector * Williams (Defender, Robotron) We'll describe how to create video and sound for each platform. Use the online 8bitworkshop IDE to compile your C programs and play them right in the browser!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h1 class="text-center">Supported Platforms</h1>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=vcs">Atari 2600</a></h2>
|
|
<p>
|
|
In 1977, the Atari 2600 popularized the idea of programmable video game consoles.
|
|
Its 6502 CPU and mere 128 bytes of RAM powered hundreds of classic games.
|
|
Fiendishly difficult to program, developers learned plenty of tricks for "racing the beam" to generate displays far beyond what its designers believed possible.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=vicdual">VIC Dual</a></h2>
|
|
<p>
|
|
The VIC Dual system was one of the first CPU-based arcade platforms from Gremlin Industries, later acquired by Sega.
|
|
It used a Z80 CPU and a character-based display with simple RGB colors.
|
|
"Carnival" is probably the best-remembered game on this platform.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=mw8080bw">Midway 8080</a></h2>
|
|
<p>
|
|
The Midway 8080 system powered Gun Fight, the first CPU-based arcade game.
|
|
Later, it would also run the immensely popular Space Invaders.
|
|
It used a Z80 and a simple black-and-white frame buffer backed by 7 KB of RAM, a huge amount for the time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img class="img-responsive center-block" src="images/scrnshots/atari2600-1-fs8.png">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="img-responsive center-block" src="images/scrnshots/vicdual-1-fs8.png">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="img-responsive center-block" src="images/scrnshots/mw8080-1-fs8.png">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=galaxian-scramble">Galaxian/Scramble</a></h2>
|
|
<p>
|
|
Galaxian pushed the limit of video game designs in 1979, with a 3 MHz Z80 and RGB color graphics with hardware sprites overlapping a scrolling background.
|
|
This hardware was licensed for many classics like Scramble and Frogger.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=vector-z80color">Atari Vector</a></h2>
|
|
<p>
|
|
Atari's black-and-white vector games like Lunar Lander and Asteroids took the industry by storm, later leading to color vector games like Tempest.
|
|
Powered by a 6502 CPU and custom state machine, they could draw points and lines at a resolution far beyond the CRT-based games of the era.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2><a href="redir.html?platform=williams-z80">Williams</a></h2>
|
|
<p>
|
|
The Williams games like Defender, Robotron, and Joust were powered by plenty of hardware.
|
|
A 36 KB framebuffer gave it 16-color graphics, and a custom bit blitter chip moved pixels around quickly.
|
|
A separate CPU powered its unique sound effects.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img class="img-responsive center-block" src="images/scrnshots/galaxian-1-fs8.png">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="img-responsive center-block" src="images/scrnshots/vector-1-fs8.png">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="img-responsive center-block" src="images/scrnshots/williams-1-fs8.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr>
|
|
|
|
<footer>
|
|
<p>
|
|
© 2018 Puzzling Plans LLC.
|
|
<a href="privacy.html" target="_blank">Privacy Policy.</a>
|
|
</p>
|
|
<p>
|
|
Some brands and product names mentioned are trademarks or service marks of their respective companies. Use of a term in this work should not be regarded as affecting the validity of any trademark or service mark.
|
|
</p>
|
|
</footer>
|
|
</div> <!-- /container -->
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|