Jump to content

Leaderboard


Popular Content

Showing content with the highest reputation since 11/09/19 in all areas

  1. 2 points
    My husband and I have been working on a new pet game called Abyssia (url: https://www.abyssia.app/) for the past year or so. It is not currently open to the public (although you can create an account), but hopefully within the next couple of months the gameplay will be live! It will have a heavy focus on battling and collecting the creatures known as abyssians in a post-apocalyptic world.
  2. 1 point
    Hello everyone. Per request, this thread will contain tutorials on how to use ImageMagick (an image layering system) with PHP for your petsite or SIM. You can use this tutorial for pets, creatures, human avatars, etc. (it should all work with the same kind of system). I assume you know a bit of basic PHP, but you don't have to know a lot. INTRODUCTION I'm Hare, aka Lunar. I'm a coder, artist, and owner of www.warrenz.net. I'll be using Warrenz for demonstration because I use ImageMagick for the rabbits on there. I've also worked with GD library and CSS layering, but won't be going over those here. COPYRIGHT The images used in this tutorial and copyrighted and belong to me. Do not use them outside the Terms of Service of www.warrenz.net or without my expressed, written permission. Now let's get on with the basics! WHY USE IMAGEMAGICK There are good alternatives to Imagick. The benefits of ImageMagick is that it's powerful (which is why I like it), but GD Library is a fast alternative (from my experience, the processing time is less). There's also CSS layering, which may be good if you don't need anything fancy. I'm not going to go over methods of layering in this tutorial, just know that there are other options out there that may work better for your needs. INSTALLATION I'm not going to go over the installation process. This tutorial assumes that you already have Imagick (the PHP extension of ImageMagick) installed on your server. If you're not sure whether Imagick is installed, you can check your PHP info page where it should be listed. I'm also going to assume you're using version 3.4.3 or later. BASIC TUTORIAL - Getting Started With Imagick Layering I'm going to start out with the most barebones code you can use for those who have never used Imagick and want to know how to get started. We'll combine a base layer with some lineart. STEP 1 - CREATE YOUR FILES You'll need two files. One file is going to contain your Imagick code, name it img.php or whatever you want to name it. The other is going to be a page on the site that displays the image (can any page you want to display them on, such as pet profile or wherever). We'll call it profile.php. On profile.php where the image is displayed, this is all you need to get started: <?php echo "<img src='img.php'>"; ?> This will display the image created in the img.php as a <img src=''> code. Now let's get some code into the img.php file: <?php $path = "./img/"; $img = new Imagick( $path . "/base.png" ); $imglines = new Imagick( $path . "lines.png" ); $img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0); header('Content-type: image/png'); echo $img; ?> The first line of code declares your file path. We're going to put all our images for the layering system in the img file on the site. The next line of code is the first layer that starts the image off. The base layer. The next line is for the next layer that will go on top of the base layer. Lineart. I also include the shine of the eyes in the lineart layer, but you don't have to do it that way. The compositeImage function is used here. It puts the $imglines layer on TOP of the $img (which is the base layer), combining the two into a single image ($img). Then we simply declare the image headers and echo the resulting $img. Congratulations! You completed the first tutorial and now have a basic layered image. BASIC TUTORIAL #2 - All My Layers + Multiply Shading So you know how to display an Imagick image, but you're not sure how to add more layers. You're going to need markings, shading, etc. Let's do it! We're going to combine ALL these layers and make some nice shading! This may look like it's going to be a lot of work, but actually, we're just going to copy paste the lineart layer over and over again. Your new ImageMagick code (img.pgp) with all the new layers: <?php $path = "./img/"; $img = new Imagick( $path . "/base.png" ); $imgagouti = new Imagick( $path . "agouti.png" ); $img->compositeImage($imgagouti, Imagick::COMPOSITE_DEFAULT, 0, 0); $imgotter = new Imagick( $path . "otter.png" ); $img->compositeImage($imgotter, Imagick::COMPOSITE_DEFAULT, 0, 0); $imgdetails = new Imagick( $path . "details.png" ); $img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0); $imgeye = new Imagick( $path . "eye.png" ); $img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0); $imgpupil = new Imagick( $path . "pupil.png" ); $img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0); $imgshading = new Imagick( $path . "shading.png" ); $img->compositeImage($imgshading, Imagick::COMPOSITE_DEFAULT, 0, 0); $imglines = new Imagick( $path . "lines.png" ); $img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0); $imgwatermark = new Imagick( $path . "watermark.png" ); $img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0); header('Content-type: image/png'); echo $img; ?> Look how we're adding one layer on top, one after another. Each one gets composited over the last, adding to the resulting $img. That's pretty much it. But wait: Why is this rabbit's shading blue? I use blue shading on Warrenz. However, we're going to switch the shading layer over to MULTIPLY. Where it says COMPOSITE_DEFAULT on the shading layer, change it to COMPOSITE_MULTIPLY. There, now we have a beautifully shaded rabbit! Multiply allows for very nice, vibrant colors. You don't have to use it, but I recommend it for more dynamic shading. That's it for now! I hope some of this is helpful.
×
×
  • Create New...

Important Information

By using this site, you agree to our Guidelines, Terms of Use, and Privacy Policy.